---
title: All Elements - Kitchen Sink
page-header: All Elements
page-menu: base.all-elements
page-libs: [nouislider, star-rating.js, tabler-flags, tabler-payments, tom-select]
layout: default
permalink: all-elements.html
---

<div class="row row-cards">
   <!-- Typography Section -->
   <div class="col-12">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Typography</h3>
         </div>
         <div class="card-body">
            <div class="row">
               <div class="col-md-6">
                  <h1>Heading 1</h1>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h5>Heading 5</h5>
                  <h6>Heading 6</h6>
               </div>
               <div class="col-md-6">
                  <p class="lead">This is a lead paragraph with larger text.</p>
                  <p>This is a regular paragraph with <strong>bold text</strong>, <em>italic text</em>, and
                     <u>underlined text</u>.</p>
                  <p><small class="text-muted">This is small muted text.</small></p>
                  <p class="text-primary">Primary text color</p>
                  <p class="text-success">Success text color</p>
                  <p class="text-danger">Danger text color</p>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Buttons Section -->
   <div class="col-12">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Buttons</h3>
         </div>
         <div class="card-body">
            <div class="row">
               <div class="col-md-6">
                  <h4>Standard Buttons</h4>
                  <div class="btn-list mb-3">
                     {% include "ui/button.html" text="Default" %}
                     {% include "ui/button.html" text="Primary" color="primary" icon="star" %}
                     {% include "ui/button.html" text="Secondary" color="secondary" %}
                     {% include "ui/button.html" text="Success" color="success" icon="check" %}
                     {% include "ui/button.html" text="Warning" color="warning" %}
                     {% include "ui/button.html" text="Danger" color="danger" icon="x" %}
                     {% include "ui/button.html" text="Info" color="info" %}
                  </div>
               </div>
               <div class="col-md-6">
                  <h4>Button Sizes</h4>
                  <div class="btn-list mb-3 align-items-start">
                     {% include "ui/button.html" text="Small" size="sm" %}
                     {% include "ui/button.html" text="Default"%}
                     {% include "ui/button.html" text="Large" size="lg" %}
                  </div>

                  <h4>Icon Buttons</h4>
                  <div class="btn-list mb-3 align-items-start">
                     {% include "ui/button.html" icon="heart" icon-only=true %}
                     {% include "ui/button.html" icon="star" icon-only=true %}
                     {% include "ui/button.html" icon="check" icon-only=true %}
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Cards Section -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Simple Card</h3>
         </div>
         <div class="card-body">
            <p>This is a simple card with header and body content.</p>
         </div>
      </div>
   </div>

   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Card with Footer</h3>
         </div>
         <div class="card-body">
            <p>This card includes a footer section.</p>
         </div>
         <div class="card-footer">
            <div class="d-flex">
               <a class="btn btn-link">Cancel</a>
               <a class="btn btn-primary ms-auto">Save</a>
            </div>
         </div>
      </div>
   </div>

   <!-- Alerts Section -->
   <div class="col-12">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Alerts</h3>
         </div>
         <div class="card-body">
            {% include "ui/alert.html" type="info" title="This is a primary alert with an icon." %}
            {% include "ui/alert.html" type="success" title="This is a success alert message." %}
            {% include "ui/alert.html" type="warning" title="This is a warning alert message." %}
            {% include "ui/alert.html" type="danger" title="This is a danger alert message." %}
         </div>
      </div>
   </div>

   <!-- Badges Section -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Badges</h3>
         </div>
         <div class="card-body">
            <div class="space-y">
               <div>
                  {% include "ui/badge.html" text="Default" %}
                  {% include "ui/badge.html" text="Primary" color="primary" %}
                  {% include "ui/badge.html" text="Secondary" color="secondary" %}
                  {% include "ui/badge.html" text="Success" color="success" %}
                  {% include "ui/badge.html" text="Warning" color="warning" %}
                  {% include "ui/badge.html" text="Danger" color="danger" %}
               </div>
               <div>
                  {% include "ui/badge.html" text="With Icon" color="primary" icon="star" %}
                  {% include "ui/badge.html" text="Light Badge" color="primary" light=true %}
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Progress Bars Section -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Progress Bars</h3>
         </div>
         <div class="card-body">
            <div class="space-y">
               <div>
                  {% include "ui/progress.html" value="25" %}
               </div>
               <div>
                  {% include "ui/progress.html" value="50" color="success" %}
               </div>
               <div>
                  {% include "ui/progress.html" value="75" color="warning" %}
               </div>
               <div>
                  {% include "ui/progress.html" value="90" color="danger" show-value=true %}
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Form Elements Section -->
   <div class="col-12">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Form Elements</h3>
         </div>
         <div class="card-body">
            <div class="row">
               <div class="col-md-6">
                  <div class="mb-3">
                     <label class="form-label">Text Input</label>
                     <input type="text" class="form-control" placeholder="Enter text">
                  </div>
                  <div class="mb-3">
                     <label class="form-label">Email Input</label>
                     <input type="email" class="form-control" placeholder="Enter email">
                  </div>
                  <div class="mb-3">
                     <label class="form-label">Password Input</label>
                     <input type="password" class="form-control" placeholder="Enter password">
                  </div>
                  <div class="mb-3">
                     <label class="form-label">Select Dropdown</label>
                     {% include "ui/select.html" id="demo-select" values="Option 1,Option 2,Option 3" %}
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="mb-3">
                     <label class="form-label">Textarea</label>
                     <textarea class="form-control" rows="3" placeholder="Enter message"></textarea>
                  </div>
                  <div class="mb-3">
                     <label class="form-label">Checkboxes</label>
                     {% include "ui/form/check.html" title="Option 1" type="checkbox" %}
                     {% include "ui/form/check.html" title="Option 2" type="checkbox" checked=true %}
                  </div>
                  <div class="mb-3">
                     <label class="form-label">Radio Buttons</label>
                     {% include "ui/form/check.html" title="Option 1" type="radio" name="radio-demo" %}
                     {% include "ui/form/check.html" title="Option 2" type="radio" name="radio-demo" checked=true %}
                  </div>
                  <div class="mb-3">
                     <label class="form-label">Switch</label>
                     {% include "ui/form/check.html" title="Enable notifications" switch=true %}
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Navigation Elements -->
   <div class="col-12">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Navigation Elements</h3>
         </div>
         <div class="card-body">
            <div class="row">
               <div class="col-md-6">
                  <h4>Tabs</h4>
                  <div class="mb-3">
                     {% include "ui/nav.html" tabs=true class="mb-4" %}
                  </div>

                  <h4>Pills Navigation</h4>
                  <div class="mb-3">
                     {% include "ui/nav.html" pills=true class="mb-4" %}
                  </div>

                  <h4>Breadcrumb</h4>
                  {% include "ui/breadcrumb.html" pages="Home,Library,Data" home-icon=true %}
               </div>
               <div class="col-md-6">
                  <h4>Pagination</h4>
                  {% include "ui/pagination.html" count="5" active-item="2" class="mb-4" %}

                  <h4>Pagination with Text</h4>
                  {% include "ui/pagination.html" count="3" text=true %}
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Lists Section -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Lists</h3>
         </div>
         <div class="card-body">
            <h4>Unordered List</h4>
            <ul>
               <li>First item</li>
               <li>Second item</li>
               <li>Third item</li>
            </ul>

            <h4>Ordered List</h4>
            <ol>
               <li>First item</li>
               <li>Second item</li>
               <li>Third item</li>
            </ol>
         </div>
      </div>
   </div>

   <!-- Table Section -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Table</h3>
         </div>
         <div class="card-body">
            <div class="table-responsive">
               <table class="table table-vcenter">
                  <thead>
                     <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Status</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td>John Doe</td>
                        <td>john@example.com</td>
                        <td>{% include "ui/badge.html" text="Active" color="success" %}</td>
                     </tr>
                     <tr>
                        <td>Jane Smith</td>
                        <td>jane@example.com</td>
                        <td>{% include "ui/badge.html" text="Pending" color="warning" %}</td>
                     </tr>
                     <tr>
                        <td>Bob Johnson</td>
                        <td>bob@example.com</td>
                        <td>{% include "ui/badge.html" text="Inactive" color="danger" %}</td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>

   <!-- Avatars Section -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Avatars</h3>
         </div>
         <div class="card-body">
            <div class="space-y">
               <div>
                  {% include "ui/avatar.html" placeholder="JD" size="sm" %}
                  {% include "ui/avatar.html" placeholder="JS" %}
                  {% include "ui/avatar.html" placeholder="BJ" size="lg" %}
                  {% include "ui/avatar.html" placeholder="AB" size="xl" %}
               </div>
               <div>
                  {% include "ui/avatar.html" placeholder="RD" shape="avatar-rounded" %}
                  {% include "ui/avatar.html" placeholder="PR" color="primary" shape="avatar-rounded" %}
                  {% include "ui/avatar.html" placeholder="SC" color="success" shape="avatar-rounded" %}
               </div>
               <div>
                  {% include "ui/avatar.html" icon="user" %}
                  {% include "ui/avatar.html" icon="star" color="warning" %}
                  {% include "ui/avatar.html" placeholder="ST" status="success" %}
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Icons Section -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Icons</h3>
         </div>
         <div class="card-body">
            <div class="space-y">
               <div>
                  {% include "ui/icon.html" icon="home" %}
                  {% include "ui/icon.html" icon="user" %}
                  {% include "ui/icon.html" icon="settings" %}
                  {% include "ui/icon.html" icon="heart" %}
                  {% include "ui/icon.html" icon="star" %}
                  {% include "ui/icon.html" icon="bell" %}
                  {% include "ui/icon.html" icon="mail" %}
                  {% include "ui/icon.html" icon="phone" %}
                  {% include "ui/icon.html" icon="calendar" %}
                  {% include "ui/icon.html" icon="clock" %}
                  {% include "ui/icon.html" icon="map-pin" %}
                  {% include "ui/icon.html" icon="camera" %}
                  {% include "ui/icon.html" icon="plus" %}
                  {% include "ui/icon.html" icon="minus" %}
                  {% include "ui/icon.html" icon="edit" %}
                  {% include "ui/icon.html" icon="trash" %}
                  {% include "ui/icon.html" icon="download" %}
                  {% include "ui/icon.html" icon="upload" %}
                  {% include "ui/icon.html" icon="search" %}
                  {% include "ui/icon.html" icon="filter" %}
                  {% include "ui/icon.html" icon="refresh" %}
                  {% include "ui/icon.html" icon="share" %}
                  {% include "ui/icon.html" icon="copy" %}
                  {% include "ui/icon.html" icon="external-link" %}
               </div>
               <div>
                  <span class="text-primary">{% include "ui/icon.html" icon="check" %}</span>
                  <span class="text-success">{% include "ui/icon.html" icon="circle-check" %}</span>
                  <span class="text-warning">{% include "ui/icon.html" icon="alert-triangle" %}</span>
                  <span class="text-danger">{% include "ui/icon.html" icon="alert-circle" %}</span>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Dropdowns Section -->
   <div class="col-12">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Dropdowns</h3>
         </div>
         <div class="card-body">
            <div class="btn-list">
               {% include "ui/dropdown.html" main-btn="Primary Dropdown" options="Action, Another action, Something else
               here" %}
               {% include "ui/dropdown.html" main-btn="Secondary Dropdown" options="Edit, Copy, Delete" %}
            </div>
         </div>
      </div>
   </div>

   <!-- Interactive Elements Section -->
   <div class="col-12">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Interactive Elements</h3>
         </div>
         <div class="card-body">
            <div class="row">
               <div class="col-md-6">
                  <h4>Accordion</h4>
                  <div class="mb-4">
                     {% include "ui/accordion.html" count="3" id="demo-accordion" %}
                  </div>
               </div>
               <div class="col-md-6">
                  <h4>Spinners</h4>
                  <div class="mb-3">
                     <div class="d-flex flex-wrap gap-2">
                        {% include "ui/spinner.html" type="border" color="primary" %}
                        {% include "ui/spinner.html" type="border" color="success" size="sm" %}
                        {% include "ui/spinner.html" type="grow" color="warning" %}
                        {% include "ui/spinner.html" type="grow" color="danger" size="sm" %}
                     </div>
                  </div>

                  <h4>Rating</h4>
                  <div class="mb-3">
                     {% include "ui/rating.html" id="demo-rating" value="4" %}
                  </div>

                  <h4>Steps</h4>
                  <div class="mb-3">
                     {% include "ui/steps.html" count="4" active="2" %}
                  </div>
                  <div class="mb-3">
                     {% include "ui/steps.html" count="4" active="3" numbers=true %}
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Status & Feedback Elements -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Status Elements</h3>
         </div>
         <div class="card-body">
            <h4>Status Dots</h4>
            <div class="mb-3">
               {% include "ui/status-dot.html" color="success" %}
               {% include "ui/status-dot.html" color="warning" %}
               {% include "ui/status-dot.html" color="danger" %}
               {% include "ui/status-dot.html" color="info" animated=true %}
            </div>

            <h4>Toast Notifications</h4>
            <div class="mb-3">
               {% include "ui/toast.html" toast-id="demo-toast" show=true text="This is a sample toast message!" %}
            </div>
         </div>
      </div>
   </div>

   <!-- Enhanced Form Elements -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Enhanced Forms</h3>
         </div>
         <div class="card-body">
            <h4>Input with Icons</h4>
            <div class="mb-3">
               {% include "ui/form/input-icon.html" placeholder="Search..." icon="search" %}
            </div>
            <div class="mb-3">
               {% include "ui/form/input-icon.html" placeholder="Loading..." loader=true %}
            </div>

            <h4>Input Groups</h4>
            <div class="mb-3">
               {% include "ui/form/input-group.html" prepend="@" placeholder="Username" %}
            </div>
            <div class="mb-3">
               {% include "ui/form/input-group.html" append=".00" prepend="$" placeholder="Price" %}
            </div>

            <h4>Range Slider</h4>
            <div class="mb-3">
               {% include "ui/range.html" id="demo-range" min="0" max="100" value="50" %}
            </div>
         </div>
      </div>
   </div>

   <!-- Tags & Labels -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Tags & Labels</h3>
         </div>
         <div class="card-body">
            <h4>Tags</h4>
            <div class="mb-3">
               {% include "ui/tag.html" text="Primary Tag" icon="star" %}
               {% include "ui/tag.html" text="Success Tag" status="success" %}
               {% include "ui/tag.html" text="Warning Tag" status="warning" %}
            </div>

            <h4>Ribbons</h4>
            <div class="position-relative mb-4" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
               {% include "ui/ribbon.html" text="New" color="success" %}
            </div>
            <div class="position-relative mb-3" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
               {% include "ui/ribbon.html" text="Sale" color="danger" top=true %}
            </div>
         </div>
      </div>
   </div>

   <!-- Media Elements -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Media Elements</h3>
         </div>
         <div class="card-body">
            <h4>Flags</h4>
            <div class="mb-3">
               <div class="d-flex flex-wrap gap-2">
                  {% include "ui/flag.html" flag="us" %}
                  {% include "ui/flag.html" flag="gb" %}
                  {% include "ui/flag.html" flag="de" %}
                  {% include "ui/flag.html" flag="fr" %}
                  {% include "ui/flag.html" flag="pl" %}
                  {% include "ui/flag.html" flag="es" %}
                  {% include "ui/flag.html" flag="it" %}
                  {% include "ui/flag.html" flag="nl" %}
                  {% include "ui/flag.html" flag="ca" %}
                  {% include "ui/flag.html" flag="au" %}
               </div>
            </div>

            <h4>Payment Icons</h4>
            <div class="mb-3">
               <div class="d-flex flex-wrap gap-2">
                  {% include "ui/payment.html" payment="visa" %}
                  {% include "ui/payment.html" payment="mastercard" %}
                  {% include "ui/payment.html" payment="paypal" %}
                  {% include "ui/payment.html" payment="americanexpress" %}
                  {% include "ui/payment.html" payment="applepay" %}
                  {% include "ui/payment.html" payment="google-pay" %}
                  {% include "ui/payment.html" payment="stripe" %}
                  {% include "ui/payment.html" payment="discover" %}
                  {% include "ui/payment.html" payment="jcb" %}
                  {% include "ui/payment.html" payment="maestro" %}
                  {% include "ui/payment.html" payment="dinersclub" %}
                  {% include "ui/payment.html" payment="bitcoin" %}
                  {% include "ui/payment.html" payment="ethereum" %}
                  {% include "ui/payment.html" payment="klarna" %}
                  {% include "ui/payment.html" payment="venmo" %}
                  {% include "ui/payment.html" payment="square" %}
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Timeline Section -->
   <div class="col-md-6">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Timeline</h3>
         </div>
         <div class="card-body">
            {% include "ui/timeline.html" %}
         </div>
      </div>
   </div>

    <!-- Empty State Section -->
    <div class="col-md-6">
       <div class="card">
          <div class="card-header">
             <h3 class="card-title">Empty State</h3>
          </div>
          <div class="card-body">
             {% include "ui/empty.html" title="No data found" subtitle="Try adjusting your search or filter to find what
             you're looking for." illustration="boy-girl.svg" button-text="Add new item" button-icon="plus" %}
          </div>
       </div>
    </div>

    <!-- Modal Section -->
    <div class="col-12">
       <div class="card">
          <div class="card-header">
             <h3 class="card-title">Modals</h3>
          </div>
          <div class="card-body">
             <div class="btn-list">
                <button class="btn" data-bs-toggle="modal" data-bs-target="#modal-demo">
                   Open Modal
                </button>
                <button class="btn" data-bs-toggle="modal" data-bs-target="#modal-success">
                   Success Modal
                </button>
             </div>
             
             <!-- Demo Modal -->
             <div class="modal modal-blur fade" id="modal-demo" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                   <div class="modal-content">
                      <div class="modal-header">
                         <h5 class="modal-title">Modal Title</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                         <p>This is a sample modal dialog. You can put any content here.</p>
                      </div>
                      <div class="modal-footer">
                         <button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                   </div>
                </div>
             </div>

             <!-- Success Modal -->
             <div class="modal modal-blur fade" id="modal-success" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
                   <div class="modal-content">
                      <div class="modal-body text-center py-4">
                         {% include "ui/icon.html" icon="circle-check" color="success" size="xl" class="mb-2" %}
                         <h3>Success!</h3>
                         <div class="text-secondary">Your action was completed successfully.</div>
                      </div>
                      <div class="modal-footer">
                         <div class="w-100">
                            <div class="row">
                               <div class="col">
                                  <button class="btn w-100" data-bs-dismiss="modal">Cancel</button>
                               </div>
                               <div class="col">
                                  <button class="btn btn-success w-100" data-bs-dismiss="modal">OK</button>
                               </div>
                            </div>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>

    <!-- Button Groups Section -->
    <div class="col-md-6">
       <div class="card">
          <div class="card-header">
             <h3 class="card-title">Button Groups</h3>
          </div>
          <div class="card-body">
             <h4>Basic Button Group</h4>
             <div class="btn-group mb-3" role="group">
                <button type="button" class="btn">Left</button>
                <button type="button" class="btn">Middle</button>
                <button type="button" class="btn">Right</button>
             </div>

             <h4>Button Toolbar</h4>
             <div class="btn-toolbar mb-3" role="toolbar">
                <div class="btn-group me-2" role="group">
                   <button type="button" class="btn">1</button>
                   <button type="button" class="btn">2</button>
                   <button type="button" class="btn">3</button>
                </div>
                <div class="btn-group" role="group">
                   <button type="button" class="btn">4</button>
                   <button type="button" class="btn">5</button>
                </div>
             </div>

             <h4>Vertical Button Group</h4>
             <div class="btn-group-vertical" role="group">
                <button type="button" class="btn">Top</button>
                <button type="button" class="btn">Middle</button>
                <button type="button" class="btn">Bottom</button>
             </div>
          </div>
       </div>
    </div>

    <!-- Segmented Navigation Section -->
    <div class="col-md-6">
       <div class="card">
          <div class="card-header">
             <h3 class="card-title">Segmented Navigation</h3>
          </div>
          <div class="card-body">
             <h4>Basic Segmented</h4>
             <div class="mb-3">
                {% include "ui/nav-segmented.html" items="Home,Profile,Settings" %}
             </div>

             <h4>With Icons</h4>
             <div class="mb-3">
                {% include "ui/nav-segmented.html" icons="home,user,settings" %}
             </div>

             <h4>With Emojis</h4>
             <div class="mb-3">
                {% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
             </div>

             <h4>With Icons and Text</h4>
             <div class="mb-3">
                {% include "ui/nav-segmented.html" items="Home,Profile,Settings" icons="home,user,settings" %}
             </div>
          </div>
       </div>
    </div>

    <!-- Collapse Section -->
    <div class="col-12">
       <div class="card">
          <div class="card-header">
             <h3 class="card-title">Collapse</h3>
          </div>
          <div class="card-body">
             <div class="row">
                <div class="col-md-6">
                   <h4>Basic Collapse</h4>
                   <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
                      Toggle Collapse
                   </button>
                   <div class="collapse" id="collapseExample">
                      <div class="card card-body">
                         This is collapsed content that can be toggled. It's hidden by default and shown when the button is clicked.
                      </div>
                   </div>
                </div>
                <div class="col-md-6">
                   <h4>Multiple Targets</h4>
                   <div class="btn-list">
                      <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample1">
                         Toggle First
                      </button>
                      <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2">
                         Toggle Second
                      </button>
                   </div>
                   <div class="collapse" id="multiCollapseExample1">
                      <div class="card card-body mb-2">
                         First collapsible content.
                      </div>
                   </div>
                   <div class="collapse" id="multiCollapseExample2">
                      <div class="card card-body">
                         Second collapsible content.
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>

    <!-- Tooltips & Popovers Section -->
    <div class="col-12">
       <div class="card">
          <div class="card-header">
             <h3 class="card-title">Tooltips & Popovers</h3>
          </div>
          <div class="card-body">
             <div class="row">
                <div class="col-md-6">
                   <h4>Tooltips</h4>
                   <div class="btn-list">
                      <button class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
                         Top
                      </button>
                      <button class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
                         Right
                      </button>
                      <button class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
                         Bottom
                      </button>
                      <button class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
                         Left
                      </button>
                   </div>
                </div>
                <div class="col-md-6">
                   <h4>Popovers</h4>
                   <div class="btn-list">
                      <button class="btn" data-bs-toggle="popover" data-bs-placement="top" title="Popover Title" data-bs-content="This is popover content on top">
                         Top Popover
                      </button>
                      <button class="btn" data-bs-toggle="popover" data-bs-placement="right" title="Popover Title" data-bs-content="This is popover content on right">
                         Right Popover
                      </button>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>

    <!-- List Groups Section -->
    <div class="col-md-6">
       <div class="card">
          <div class="card-header">
             <h3 class="card-title">List Groups</h3>
          </div>
          <div class="card-body p-0">
             <div class="list-group list-group-flush">
                <div class="list-group-item">
                   {% include "ui/icon.html" icon="home" class="me-2" %}
                   Home
                </div>
                <div class="list-group-item active">
                   {% include "ui/icon.html" icon="star" class="me-2" %}
                   Active item
                </div>
                <div class="list-group-item">
                   {% include "ui/icon.html" icon="settings" class="me-2" %}
                   Settings
                </div>
                <div class="list-group-item">
                   {% include "ui/icon.html" icon="user" class="me-2" %}
                   Profile
                </div>
                <div class="list-group-item disabled">
                   {% include "ui/icon.html" icon="lock" class="me-2" %}
                   Disabled item
                </div>
             </div>
          </div>
       </div>
    </div>

    <!-- Content Elements Section -->
    <div class="col-md-6">
       <div class="card">
          <div class="card-header">
             <h3 class="card-title">Content Elements</h3>
          </div>
          <div class="card-body">
             <h4>Blockquote</h4>
             <blockquote class="blockquote mb-4">
                <p>This is a blockquote example with some sample text to demonstrate the styling.</p>
                <footer class="blockquote-footer">
                   Someone famous in <cite title="Source Title">Source Title</cite>
                </footer>
             </blockquote>

             <h4>Code Block</h4>
             <pre class="mb-3"><code>// JavaScript example
function greetUser(name) {
   console.log(`Hello, ${name}!`);
   return true;
}</code></pre>

             <h4>Inline Elements</h4>
             <p>This paragraph contains <code>inline code</code>, <kbd>Ctrl + S</kbd> keyboard shortcut, and <mark>highlighted text</mark>.</p>
          </div>
       </div>
    </div>
 </div>