tabler/preview/pages/all-elements.astro

---
// Code-block content lives in the frontmatter so Astro does not try to evaluate
// its `${name}` / `{ }` as expressions; injected verbatim via set:html.

import ButtonGroup from '@ui/ButtonGroup.astro'
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import CardFooter from '@ui/CardFooter.astro'
import Alert from '@ui/Alert.astro'
import Badge from '@ui/Badge.astro'
import Progress from '@ui/Progress.astro'
import Select from '@ui/Select.astro'
import Check from '@ui/form/Check.astro'
import FormGroup from '@ui/FormGroup.astro'
import Nav from '@ui/Nav.astro'
import Breadcrumb from '@ui/Breadcrumb.astro'
import Pagination from '@ui/Pagination.astro'
import Avatar from '@ui/Avatar.astro'
import Icon from '@ui/Icon.astro'
import Dropdown from '@ui/Dropdown.astro'
import Accordion from '@ui/Accordion.astro'
import Spinner from '@ui/Spinner.astro'
import Rating from '@ui/Rating.astro'
import Steps from '@ui/Steps.astro'
import StatusDot from '@ui/StatusDot.astro'
import Toast from '@ui/Toast.astro'
import InputIcon from '@ui/form/InputIcon.astro'
import InputGroup from '@ui/InputGroup.astro'
import Range from '@ui/Range.astro'
import Tag from '@ui/Tag.astro'
import Ribbon from '@ui/Ribbon.astro'
import Flag from '@ui/Flag.astro'
import Payment from '@ui/Payment.astro'
import Timeline from '@ui/Timeline.astro'
import Empty from '@ui/Empty.astro'
import NavSegmented from '@ui/NavSegmented.astro'
import ListGroup from '@ui/ListGroup.astro'
import ListGroupItem from '@ui/ListGroupItem.astro'
import payments from '@data/payments.json'

const PAYMENT_IDS = ['visa', 'mastercard', 'paypal', 'americanexpress', 'applepay', 'google-pay', 'stripe', 'discover', 'jcb', 'maestro', 'dinersclub', 'bitcoin', 'ethereum', 'klarna', 'venmo', 'square'] as const
type PaymentId = (typeof PAYMENT_IDS)[number]

const paymentNames = Object.fromEntries((payments as { name: string; logo: string }[]).map((p) => [p.logo, p.name])) as Record<PaymentId, string>

const countryNames = {
  us: 'United States',
  gb: 'United Kingdom',
  de: 'Germany',
  fr: 'France',
  pl: 'Poland',
  es: 'Spain',
  it: 'Italy',
  nl: 'Netherlands',
  ca: 'Canada',
  au: 'Australia',
}

const codeExample = `// JavaScript example
function greetUser(name) {
   console.log(\`Hello, \${name}!\`);
   return true;
}`
---

<DefaultLayout title="All Elements - Kitchen Sink" pageHeader="All Elements" pageMenu="base.all-elements" pageLibs={['nouislider', 'star-rating.js', 'tabler-flags', 'tabler-payments', 'tom-select']}>
  <div class="row row-cards">
    <!-- Typography Section -->
    <div class="col-12">
      <Card>
        <CardHeader title="Typography" />
        <CardBody>
          <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>
        </CardBody>
      </Card>
    </div>

    <!-- Buttons Section -->
    <div class="col-12">
      <Card>
        <CardHeader title="Buttons" />
        <CardBody>
          <div class="row">
            <div class="col-md-6">
              <h4>Standard Buttons</h4>
              <ButtonList class="mb-3">
                <Button text="Default" />
                <Button text="Primary" color="primary" icon="star" />
                <Button text="Secondary" color="secondary" />
                <Button text="Success" color="success" icon="check" />
                <Button text="Warning" color="warning" />
                <Button text="Danger" color="danger" icon="x" />
                <Button text="Info" color="info" />
              </ButtonList>
            </div>
            <div class="col-md-6">
              <h4>Button Sizes</h4>
              <ButtonList class="mb-3 align-items-start">
                <Button text="Small" size="sm" />
                <Button text="Default" />
                <Button text="Large" size="lg" />
              </ButtonList>

              <h4>Icon Buttons</h4>
              <ButtonList class="mb-3 align-items-start">
                <Button icon="heart" iconOnly />
                <Button icon="star" iconOnly />
                <Button icon="check" iconOnly />
              </ButtonList>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>

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

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

    <!-- Alerts Section -->
    <div class="col-12">
      <Card>
        <CardHeader title="Alerts" />
        <CardBody>
          <Alert type="info" title="This is a primary alert with an icon." />
          <Alert type="success" title="This is a success alert message." />
          <Alert type="warning" title="This is a warning alert message." />
          <Alert type="danger" title="This is a danger alert message." />
        </CardBody>
      </Card>
    </div>

    <!-- Badges Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Badges" />
        <CardBody>
          <div class="space-y">
            <div>
              <Badge text="Default" />
              <Badge text="Primary" color="primary" />
              <Badge text="Secondary" color="secondary" />
              <Badge text="Success" color="success" />
              <Badge text="Warning" color="warning" />
              <Badge text="Danger" color="danger" />
            </div>
            <div>
              <Badge text="With Icon" color="primary" icon="star" />
              <Badge text="Light Badge" color="primary" light />
            </div>
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Progress Bars Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Progress Bars" />
        <CardBody>
          <div class="space-y">
            <div>
              <Progress value="25" />
            </div>
            <div>
              <Progress value="50" color="success" />
            </div>
            <div>
              <Progress value="75" color="warning" />
            </div>
            <div>
              <Progress value="90" color="danger" showValue />
            </div>
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Form Elements Section -->
    <div class="col-12">
      <Card>
        <CardHeader title="Form Elements" />
        <CardBody>
          <div class="row">
            <div class="col-md-6">
              <FormGroup label="Text Input" for="all-elements-text-input">
                <input type="text" class="form-control" id="all-elements-text-input" placeholder="Enter text" />
              </FormGroup>
              <FormGroup label="Email Input" for="all-elements-email-input">
                <input type="email" class="form-control" id="all-elements-email-input" placeholder="Enter email" />
              </FormGroup>
              <FormGroup label="Password Input" for="all-elements-password-input">
                <input type="password" class="form-control" id="all-elements-password-input" placeholder="Enter password" />
              </FormGroup>
              <FormGroup label="Select Dropdown" for="select-demo-select">
                <Select id="demo-select" values={['Option 1', 'Option 2', 'Option 3']} />
              </FormGroup>
            </div>
            <div class="col-md-6">
              <FormGroup label="Textarea" for="all-elements-textarea">
                <textarea class="form-control" id="all-elements-textarea" rows="3" placeholder="Enter message"></textarea>
              </FormGroup>
              <FormGroup label="Checkboxes">
                <Check title="Option 1" type="checkbox" />
                <Check title="Option 2" type="checkbox" checked />
              </FormGroup>
              <FormGroup label="Radio Buttons">
                <Check title="Option 1" type="radio" name="radio-demo" />
                <Check title="Option 2" type="radio" name="radio-demo" checked />
              </FormGroup>
              {/* Check.astro has no id prop to target with `for`; its own <label> already wraps the input, so it's self-labeled */}
              <FormGroup label="Switch">
                <Check title="Enable notifications" switch />
              </FormGroup>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Navigation Elements -->
    <div class="col-12">
      <Card>
        <CardHeader title="Navigation Elements" />
        <CardBody>
          <div class="row">
            <div class="col-md-6">
              <h4>Tabs</h4>
              <div class="mb-3">
                <Nav tabs class="mb-4" />
              </div>

              <h4>Pills Navigation</h4>
              <div class="mb-3">
                <Nav pills class="mb-4" />
              </div>

              <h4>Breadcrumb</h4>
              <Breadcrumb pages={['Home', 'Library', 'Data']} homeIcon />
            </div>
            <div class="col-md-6">
              <h4>Pagination</h4>
              {/* activeItem="2" is a string — strict equality never matches integer index, so no page is active */}
              <Pagination count={5} activeItem="2" class="mb-4" />

              <h4>Pagination with Text</h4>
              <Pagination count={3} text />
            </div>
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Lists Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Lists" />
        <CardBody>
          <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>
        </CardBody>
      </Card>
    </div>

    <!-- Table Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Table" />
        <CardBody>
          <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><Badge text="Active" color="success" /></td>
                </tr>
                <tr>
                  <td>Jane Smith</td>
                  <td>jane@example.com</td>
                  <td><Badge text="Pending" color="warning" /></td>
                </tr>
                <tr>
                  <td>Bob Johnson</td>
                  <td>bob@example.com</td>
                  <td><Badge text="Inactive" color="danger" /></td>
                </tr>
              </tbody>
            </table>
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Avatars Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Avatars" />
        <CardBody>
          <div class="space-y">
            <div>
              <Avatar placeholder="JD" size="sm" />
              <Avatar placeholder="JS" />
              <Avatar placeholder="BJ" size="lg" />
              <Avatar placeholder="AB" size="xl" />
            </div>
            <div>
              <Avatar placeholder="RD" shape="rounded" />
              <Avatar placeholder="PR" color="primary" shape="rounded" />
              <Avatar placeholder="SC" color="success" shape="rounded" />
            </div>
            <div>
              <Avatar icon="user" />
              <Avatar icon="star" color="warning" />
              <Avatar placeholder="ST" status="success" />
            </div>
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Icons Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Icons" />
        <CardBody>
          <div class="space-y">
            <div>
              <Icon name="home" />
              <Icon name="user" />
              <Icon name="settings" />
              <Icon name="heart" />
              <Icon name="star" />
              <Icon name="bell" />
              <Icon name="mail" />
              <Icon name="phone" />
              <Icon name="calendar" />
              <Icon name="clock" />
              <Icon name="map-pin" />
              <Icon name="camera" />
              <Icon name="plus" />
              <Icon name="minus" />
              <Icon name="edit" />
              <Icon name="trash" />
              <Icon name="download" />
              <Icon name="upload" />
              <Icon name="search" />
              <Icon name="filter" />
              <Icon name="refresh" />
              <Icon name="share" />
              <Icon name="copy" />
              <Icon name="external-link" />
            </div>
            <div>
              <span class="text-primary"><Icon name="check" /></span>
              <span class="text-success"><Icon name="circle-check" /></span>
              <span class="text-warning"><Icon name="alert-triangle" /></span>
              <span class="text-danger"><Icon name="alert-circle" /></span>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Dropdowns Section -->
    <div class="col-12">
      <Card>
        <CardHeader title="Dropdowns" />
        <CardBody>
          <ButtonList>
            <Dropdown mainBtn="Primary Dropdown" options={['Action', 'Another action', 'Something else here']} />
            <Dropdown mainBtn="Secondary Dropdown" options={['Edit', 'Copy', 'Delete']} />
          </ButtonList>
        </CardBody>
      </Card>
    </div>

    <!-- Interactive Elements Section -->
    <div class="col-12">
      <Card>
        <CardHeader title="Interactive Elements" />
        <CardBody>
          <div class="row">
            <div class="col-md-6">
              <h4>Accordion</h4>
              <div class="mb-4">
                <Accordion 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">
                  <Spinner type="border" color="primary" />
                  <Spinner type="border" color="success" size="sm" />
                  <Spinner type="grow" color="warning" />
                  <Spinner type="grow" color="danger" size="sm" />
                </div>
              </div>

              <h4>Rating</h4>
              <div class="mb-3">
                <Rating id="demo-rating" value={4} />
              </div>

              <h4>Steps</h4>
              <div class="mb-3">
                <Steps count={4} active="2" />
              </div>
              <div class="mb-3">
                <Steps count={4} active="3" numbers />
              </div>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Status & Feedback Elements -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Status Elements" />
        <CardBody>
          <h4>Status Dots</h4>
          <div class="mb-3">
            <StatusDot color="success" label="Success" />
            <StatusDot color="warning" label="Warning" />
            <StatusDot color="danger" label="Danger" />
            <StatusDot color="info" animated label="Info" />
          </div>

          <h4>Toast Notifications</h4>
          <div class="mb-3">
            <Toast toastId="demo-toast" show text="This is a sample toast message!" />
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Enhanced Form Elements -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Enhanced Forms" />
        <CardBody>
          <h4>Input with Icons</h4>
          <div class="mb-3">
            <InputIcon placeholder="Search..." icon="search" />
          </div>
          <div class="mb-3">
            <InputIcon placeholder="Loading..." loader />
          </div>

          <h4>Input Groups</h4>
          <div class="mb-3">
            <InputGroup prepend="@" placeholder="Username" />
          </div>
          <div class="mb-3">
            <InputGroup append=".00" prepend="$" placeholder="Price" />
          </div>

          <h4>Range Slider</h4>
          <div class="mb-3">
            <Range id="demo-range" min={0} max={100} value="50" />
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Tags & Labels -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Tags & Labels" />
        <CardBody>
          <h4>Tags</h4>
          <div class="mb-3">
            <Tag text="Primary Tag" icon="star" />
            <Tag text="Success Tag" status="success" />
            <Tag text="Warning Tag" status="warning" />
          </div>

          <h4>Ribbons</h4>
          <div class="position-relative mb-4" style="height: 100px; background-color: var(--tblr-bg-surface-secondary); border-radius: 8px;">
            <Ribbon text="New" color="success" />
          </div>
          <div class="position-relative mb-3" style="height: 100px; background: var(--tblr-bg-surface-secondary); border-radius: 8px;">
            <Ribbon text="Sale" color="danger" top />
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Media Elements -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Media Elements" />
        <CardBody>
          <h4>Flags</h4>
          <div class="mb-3">
            <div class="d-flex flex-wrap gap-2">
              <Flag flag="us" label={countryNames.us} />
              <Flag flag="gb" label={countryNames.gb} />
              <Flag flag="de" label={countryNames.de} />
              <Flag flag="fr" label={countryNames.fr} />
              <Flag flag="pl" label={countryNames.pl} />
              <Flag flag="es" label={countryNames.es} />
              <Flag flag="it" label={countryNames.it} />
              <Flag flag="nl" label={countryNames.nl} />
              <Flag flag="ca" label={countryNames.ca} />
              <Flag flag="au" label={countryNames.au} />
            </div>
          </div>

          <h4>Payment Icons</h4>
          <div class="mb-3">
            <div class="d-flex flex-wrap gap-2">
              {
                PAYMENT_IDS.map((payment) => (
                  <>
                    <Payment payment={payment} label={paymentNames[payment]} class="hide-theme-dark" />
                    <Payment payment={payment} label={paymentNames[payment]} dark class="hide-theme-light" />
                  </>
                ))
              }
            </div>
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Timeline Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Timeline" />
        <CardBody>
          <Timeline />
        </CardBody>
      </Card>
    </div>

    <!-- Empty State Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Empty State" />
        <CardBody>
          <Empty title="No data found" subtitle="Try adjusting your search or filter to find what you're looking for." illustration="boy-girl.svg" buttonText="Add new item" buttonIcon="plus" />
        </CardBody>
      </Card>
    </div>

    <!-- Modal Section -->
    <div class="col-12">
      <Card>
        <CardHeader title="Modals" />
        <CardBody>
          <ButtonList>
            <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>
          </ButtonList>

          <!-- 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">
                  <Icon name="circle-check" color="success" size="lg" 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>
        </CardBody>
      </Card>
    </div>

    <!-- Button Groups Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Button Groups" />
        <CardBody>
          <h4>Basic Button Group</h4>
          <ButtonGroup class="mb-3">
            <button type="button" class="btn">Left</button>
            <button type="button" class="btn">Middle</button>
            <button type="button" class="btn">Right</button>
          </ButtonGroup>

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

          <h4>Vertical Button Group</h4>
          <ButtonGroup vertical={true}>
            <button type="button" class="btn">Top</button>
            <button type="button" class="btn">Middle</button>
            <button type="button" class="btn">Bottom</button>
          </ButtonGroup>
        </CardBody>
      </Card>
    </div>

    <!-- Segmented Navigation Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Segmented Navigation" />
        <CardBody>
          <h4>Basic Segmented</h4>
          <div class="mb-3">
            <NavSegmented items={['Home', 'Profile', 'Settings']} />
          </div>

          <h4>With Icons</h4>
          <div class="mb-3">
            <NavSegmented icons={['home', 'user', 'settings']} />
          </div>

          <h4>With Emojis</h4>
          <div class="mb-3">
            <NavSegmented items={['👦', '👦🏿', '👦🏾', '👦🏽', '👦🏼', '👦🏻']} />
          </div>

          <h4>With Icons and Text</h4>
          <div class="mb-3">
            <NavSegmented items={['Home', 'Profile', 'Settings']} icons={['home', 'user', 'settings']} />
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- Collapse Section -->
    <div class="col-12">
      <Card>
        <CardHeader title="Collapse" />
        <CardBody>
          <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>
              <ButtonList>
                <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>
              </ButtonList>
              <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>
        </CardBody>
      </Card>
    </div>

    <!-- Tooltips & Popovers Section -->
    <div class="col-12">
      <Card>
        <CardHeader title="Tooltips & Popovers" />
        <CardBody>
          <div class="row">
            <div class="col-md-6">
              <h4>Tooltips</h4>
              <ButtonList>
                <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>
              </ButtonList>
            </div>
            <div class="col-md-6">
              <h4>Popovers</h4>
              <ButtonList>
                <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>
              </ButtonList>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>

    <!-- List Groups Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="List Groups" />
        <CardBody class="p-0">
          <ListGroup flush>
            <ListGroupItem>
              <Icon name="home" class="me-2" />
              Home
            </ListGroupItem>
            <ListGroupItem active>
              <Icon name="star" class="me-2" />
              Active item
            </ListGroupItem>
            <ListGroupItem>
              <Icon name="settings" class="me-2" />
              Settings
            </ListGroupItem>
            <ListGroupItem>
              <Icon name="user" class="me-2" />
              Profile
            </ListGroupItem>
            <ListGroupItem disabled>
              <Icon name="lock" class="me-2" />
              Disabled item
            </ListGroupItem>
          </ListGroup>
        </CardBody>
      </Card>
    </div>

    <!-- Content Elements Section -->
    <div class="col-md-6">
      <Card>
        <CardHeader title="Content Elements" />
        <CardBody>
          <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 set:html={codeExample} /></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>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>