Update README

README.md

@@ -1,42 +1,72 @@
 
 # Table of Contents
 
-1.  [Cl-Sbt](#orge32d94b)
+1.  [Cl-Sbt](#org625f6f0)
-    1.  [Usage](#org3a285ae)
+    1.  [Usage](#org905a16a)
-    2.  [Installation](#orgcc5e562)
+        1.  [Defining a Card](#orgca7c75b)
-    3.  [Author](#orgd606cae)
+        2.  [Defining a Dropdown](#org9888757)
-    4.  [Copyright](#orga764680)
+    2.  [Installation](#orgb5d14a1)
+    3.  [Author](#org0e6a662)
+    4.  [Copyright](#orge69a71c)
 
 
-<a id="orge32d94b"></a>
+<a id="org625f6f0"></a>
 
 # Cl-Sbt
 
 Common Lisp Spinneret Bootstrap Templates
 
 
-<a id="org3a285ae"></a>
+<a id="org905a16a"></a>
 
 ## Usage
 
+
+<a id="orgca7c75b"></a>
+
+### Defining a Card
+
+The following code demonstrates how to define a card using the card macro.
+
+    (cl-sbt-card:card
+      (cl-sbt-card:body
+        (cl-sbt-card:title "Card title")
+        (cl-sbt-card:subtitle "Card subtitle")
+        (cl-sbt-card:text "Some quick example text to build on the card title and make up the bulk of the card's content.")
+        (cl-sbt-card:link (:href "#") "Card link")))
+
+
+<a id="org9888757"></a>
+
+### Defining a Dropdown
+
+The following code demonstrates how to define a dropdown using the dropdown
+macro.
+
+    (cl-sbt-dropdown:dropdown (:title "Dropdown button")
+      (cl-sbt-dropdown:menu
+        (cl-sbt-dropdown:item "Action")
+        (cl-sbt-dropdown:item "Another action")
+        (cl-sbt-dropdown:item "Something else here")))
+
+
+<a id="orgb5d14a1"></a>
+
+## Installation
+
     git clone https://git.sr.ht/~marcuskammer/cl-sbt ~/quicklisp/local-projects/cl-sbt/
 
     (ql:quickload :cl-sbt)
 
 
-<a id="orgcc5e562"></a>
+<a id="org0e6a662"></a>
-
-## Installation
-
-
-<a id="orgd606cae"></a>
 
 ## Author
 
 -   Marcus Kammer (marcus.kammer@mailbox.org)
 
 
-<a id="orga764680"></a>
+<a id="orge69a71c"></a>
 
 ## Copyright
 

README.org

@@ -4,6 +4,62 @@ Common Lisp Spinneret Bootstrap Templates
 
 ** Usage
 
+*** Defining a Card
+
+The following code demonstrates how to define a card using the card macro.
+
+#+begin_src lisp :results output html
+  (cl-sbt-card:card
+    (cl-sbt-card:body
+      (cl-sbt-card:title "Card title")
+      (cl-sbt-card:subtitle "Card subtitle")
+      (cl-sbt-card:text "Some quick example text to build on the card title and make up the bulk of the card's content.")
+      (cl-sbt-card:link (:href "#") "Card link")))
+#+end_src
+
+#+RESULTS:
+#+begin_export html
+<div class=card>
+ <div class=card-body>
+  <h5 class=card-title>Card title</h5>
+  <h6
+      class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
+  <p class=card-text>Some quick example text to build on the card title and make up
+   the bulk of the card&#39;s content.
+  <a class=card-link href=#>Card link</a>
+ </div>
+</div>
+#+end_export
+
+*** Defining a Dropdown
+
+The following code demonstrates how to define a dropdown using the dropdown
+macro.
+
+#+begin_src lisp :results output html
+  (cl-sbt-dropdown:dropdown (:title "Dropdown button")
+    (cl-sbt-dropdown:menu
+      (cl-sbt-dropdown:item "Action")
+      (cl-sbt-dropdown:item "Another action")
+      (cl-sbt-dropdown:item "Something else here")))
+#+end_src
+
+#+RESULTS:
+#+begin_export html
+<div class=dropdown>
+ <button class="btn btn-secondary dropdown-toggle"
+         type=button data-bs-toggle=dropdown
+         aria-expanded=false>Dropdown button</button>
+ <ul class=dropdown-menu>
+  <li><a class=dropdown-item href=#>Action</a>
+  <li><a class=dropdown-item href=#>Another action</a>
+  <li><a class=dropdown-item href=#>Something else here</a>
+ </ul>
+</div>
+#+end_export
+
+** Installation
+
 #+begin_src bash
   git clone https://git.sr.ht/~marcuskammer/cl-sbt ~/quicklisp/local-projects/cl-sbt/
 #+end_src
@@ -12,8 +68,6 @@ Common Lisp Spinneret Bootstrap Templates
   (ql:quickload :cl-sbt)
 #+end_src
 
-** Installation
-
 ** Author
 
 + Marcus Kammer (marcus.kammer@mailbox.org)