Elements & UI

<div class="card card-hover card-accent mb-8"><div class="card-body">
        <div class="flex items-start gap-4">
            <div data-icon="palette" class="text-primary" style="font-size: 2rem;"></div>
            <div style="flex: 1;">
                <h3 class="text-xl font-semibold mb-2">CSS Customisation Cheat-Sheet</h3>
                <p class="mb-3">Override Domma's CSS variables to match your existing project's design system. Learn which variables control colours, typography, spacing, and component styles - no need to rewrite CSS.</p>
                <a href="/showcase/elements/css-customisation" class="btn btn-primary btn-sm">View Cheat-Sheet →</a>
            </div>
        </div>
    </div>
</div>

<p class="text-gray-600 mb-6">Utility components for user interaction, feedback, and compliance</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem;">

    <!-- Cookie Consent -->
    <a href="/showcase/elements/cookie-consent" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="shield"></div>
            <h3 class="card-title">Cookie Consent</h3>
            <p class="card-text">GDPR-compliant cookie consent management.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Fully configurable</li>
                <li>GDPR compliant</li>
                <li>Category management</li>
                <li>localStorage persistence</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.cookieConsent({ ... })</code>
        </div>
    </a>

    <!-- Back to Top -->
    <a href="/showcase/elements/back-to-top" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="chevron-up"></div>
            <h3 class="card-title">Back to Top</h3>
            <p class="card-text">Scroll-to-top button that appears after scrolling.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Auto show/hide</li>
                <li>Smooth scroll</li>
                <li>Customisable position</li>
                <li>Event callbacks</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.backToTop('#btn', { showAfter: 300 })</code>
        </div>
    </a>

    <!-- DesktopNotification -->
    <a href="/showcase/elements/notification" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="bell"></div>
            <h3 class="card-title">DesktopNotification</h3>
            <p class="card-text">Browser native desktop notifications with permission handling.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Desktop push alerts</li>
                <li>Permission management</li>
                <li>Event callbacks</li>
                <li>Instance tracking</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.notify('Hello', { body: 'World!' })</code>
        </div>
    </a>

    <!-- Toast -->
    <a href="/showcase/elements/toast" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="check"></div>
            <h3 class="card-title">Toast</h3>
            <p class="card-text">Non-blocking notification messages with auto-dismiss.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Success/error/info</li>
                <li>Auto-dismiss timer</li>
                <li>Position control</li>
                <li>Action buttons</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.toast('Saved!', { type: 'success' })</code>
        </div>
    </a>

    <!-- Loader -->
    <a href="/showcase/elements/loader" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="loader"></div>
            <h3 class="card-title">Loader</h3>
            <p class="card-text">Loading indicators with multiple animation types.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>4 animation types</li>
                <li>Overlay mode</li>
                <li>Size customisation</li>
                <li>Loading text</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.loader('#box', { type: 'spinner' })</code>
        </div>
    </a>

    <!-- Skeleton -->
    <a href="/showcase/elements/skeleton" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="layout"></div>
            <h3 class="card-title">Skeleton</h3>
            <p class="card-text">Shimmering placeholders shaped like the content on its way.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Text, card, list and table shapes</li>
                <li>E.skeleton.while(promise)</li>
                <li>DataTable loading rows</li>
                <li>CSS-only, theme-aware</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.skeleton('#posts', { type: 'card' })</code>
        </div>
    </a>

    <!-- Timer -->
    <a href="/showcase/elements/timer" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="clock"></div>
            <h3 class="card-title">Timer</h3>
            <p class="card-text">Countdown timer with visual display or headless mode.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Visual or headless</li>
                <li>Multiple formats</li>
                <li>Time manipulation</li>
                <li>Notification alerts</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.timer('#timer', { duration: 60000 })</code>
        </div>
    </a>

    <!-- Alarm -->
    <a href="/showcase/elements/alarm" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="bell"></div>
            <h3 class="card-title">Alarm</h3>
            <p class="card-text">Scheduled time-based alerts with localStorage persistence.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Persistent alarms</li>
                <li>Repeat patterns</li>
                <li>Snooze support</li>
                <li>Auto-notification</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.alarm().add({ time: '09:00', label: 'Standup' })</code>
        </div>
    </a>
</div>

<p class="text-gray-600 mb-6">Structural components for building interfaces</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem;">

    <!-- Accordion -->
    <a href="/showcase/elements/accordion" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="chevron-down"></div>
            <h3 class="card-title">Accordion</h3>
            <p class="card-text">Collapsible content sections with smooth animations.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Single or multi-expand</li>
                <li>Smooth animations</li>
                <li>Nested support</li>
                <li>Keyboard accessible</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.accordion('#faq', { multiExpand: false })</code>
        </div>
    </a>

    <!-- Avatar -->
    <a href="/showcase/elements/avatar" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="users"></div>
            <h3 class="card-title">Avatar</h3>
            <p class="card-text">A person's picture, initials or an icon - alone or stacked in a group.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Initials and a stable colour from the name</li>
                <li>Picture with initials fallback</li>
                <li>Sizes, shapes, status dot and ring</li>
                <li>Groups with "+N" and a popover</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.avatarGroup('#team', { people, max: 4 })</code>
        </div>
    </a>

    <!-- Badge -->
    <a href="/showcase/elements/badge" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="box"></div>
            <h3 class="card-title">Badge</h3>
            <p class="card-text">Small status indicators and labels.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Multiple variants</li>
                <li>Pill &amp; rounded styles</li>
                <li>Dismissible badges</li>
                <li>Counter badges</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.badge('#el', { variant: 'primary' })</code>
        </div>
    </a>

    <!-- Number Badge -->
    <a href="/showcase/elements/number-badge" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="bell"></div>
            <h3 class="card-title">Number Badge</h3>
            <p class="card-text">Positioned notification counters and presence dots.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>CSS-only or JS API</li>
                <li>Auto-hide at zero</li>
                <li>Dot mode for presence</li>
                <li>Pulse animation</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.numberBadge('#btn', { count: 5 })</code>
        </div>
    </a>

    <!-- List Group -->
    <a href="/showcase/elements/list-group" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="list"></div>
            <h3 class="card-title">List Group</h3>
            <p class="card-text">Selectable lists with keyboard navigation and colour variants.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Single &amp; multi-select</li>
                <li>Keyboard navigation</li>
                <li>Colour variants</li>
                <li>Flush &amp; numbered modes</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.listGroup('#list', { mode: 'single' })</code>
        </div>
    </a>

    <!-- Signature -->
    <a href="/showcase/elements/signature" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="edit"></div>
            <h3 class="card-title">Signature</h3>
            <p class="card-text">Canvas-based handwriting pad for capturing signatures in forms.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Mouse, touch &amp; stylus</li>
                <li>Undo / redo history</li>
                <li>PNG &amp; SVG export</li>
                <li>Type-your-name fallback</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.signature('#pad', { typeFallback: true })</code>
        </div>
    </a>

    <!-- Breadcrumbs -->
    <a href="/showcase/elements/breadcrumbs" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="chevron-right"></div>
            <h3 class="card-title">Breadcrumbs</h3>
            <p class="card-text">Navigation trail showing user location.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Dynamic updates</li>
                <li>Custom separators</li>
                <li>Home icon support</li>
                <li>Responsive collapsing</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.breadcrumbs('#nav', { items: [...] })</code>
        </div>
    </a>

    <!-- Button Group -->
    <a href="/showcase/elements/button-group" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="grid"></div>
            <h3 class="card-title">Button Group</h3>
            <p class="card-text">Radio and checkbox button groups.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Single or multi-select</li>
                <li>Vertical layout</li>
                <li>Value binding</li>
                <li>Programmatic control</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.buttonGroup('.btns', { mode: 'single' })</code>
        </div>
    </a>

    <!-- Card -->
    <a href="/showcase/elements/card" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="zap"></div>
            <h3 class="card-title">Card</h3>
            <p class="card-text">Container components with hover effects and clickability.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Hover effects</li>
                <li>Click handling</li>
                <li>Header &amp; footer</li>
                <li>Image support</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.card('.card', { hover: true })</code>
        </div>
    </a>

    <!-- Carousel -->
    <a href="/showcase/elements/carousel" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="image"></div>
            <h3 class="card-title">Carousel</h3>
            <p class="card-text">Image and content sliders with controls.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Auto-play</li>
                <li>Touch support</li>
                <li>Multiple transitions</li>
                <li>Indicators &amp; arrows</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.carousel('#slider', { autoplay: true })</code>
        </div>
    </a>

    <!-- Dialog -->
    <a href="/showcase/elements/dialog" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="message-circle"></div>
            <h3 class="card-title">Dialog</h3>
            <p class="card-text">Promise-based modal dialogs (alert, confirm, prompt).</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Promise-based API</li>
                <li>Alert, confirm, prompt</li>
                <li>Custom styling</li>
                <li>Keyboard support</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>await elements.confirm('Are you sure?')</code>
        </div>
    </a>

    <!-- Dropdown -->
    <a href="/showcase/elements/dropdown" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="chevron-down"></div>
            <h3 class="card-title">Dropdown</h3>
            <p class="card-text">Contextual overlay menus with smart positioning.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Click or hover trigger</li>
                <li>Auto-positioning</li>
                <li>Nested support</li>
                <li>Close on outside click</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.dropdown('#menu', { trigger: 'hover' })</code>
        </div>
    </a>

    <!-- Context Menu -->
    <a href="/showcase/elements/context-menu" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="menu"></div>
            <h3 class="card-title">Context Menu</h3>
            <p class="card-text">Right-click menus bound to a container and delegated to its children.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Delegated to rows</li>
                <li>Nests without overriding</li>
                <li>Keyboard and long-press</li>
                <li>Submenus</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.contextMenu('#grid', { match: 'tr' })</code>
        </div>
    </a>

    <!-- Sortable -->
    <a href="/showcase/elements/sortable" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="move"></div>
            <h3 class="card-title">Sortable</h3>
            <p class="card-text">Drag-to-reorder lists, rows and trees by mouse, touch and keyboard.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Live or indicator mode</li>
                <li>Nested trees with onDrop</li>
                <li>Remembers the order</li>
                <li>Handles, touch and Alt+Arrow</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.sortable('#list', { persist: 'tasks' })</code>
        </div>
    </a>

    <!-- Forms -->
    <a href="/showcase/elements/forms" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="edit"></div>
            <h3 class="card-title">Forms</h3>
            <p class="card-text">Enhanced form controls with validation.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Input validation</li>
                <li>Custom controls</li>
                <li>Error handling</li>
                <li>Submit management</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>&lt;input class="form-input" required&gt;</code>
        </div>
    </a>

    <!-- hero -->
    <a href="/showcase/elements/hero" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="layout"></div>
            <h3 class="card-title">hero</h3>
            <p class="card-text">Hero sections with flexible layouts (CSS-only).</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Multiple layouts</li>
                <li>Split layouts</li>
                <li>Gradient overlays</li>
                <li>Responsive sizing</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>class="hero hero-primary"</code>
        </div>
    </a>

    <!-- Modal -->
    <a href="/showcase/elements/modal" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="box"></div>
            <h3 class="card-title">Modal</h3>
            <p class="card-text">Dialog overlays with backdrop and animations.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Backdrop control</li>
                <li>Keyboard shortcuts</li>
                <li>Nested support</li>
                <li>Size variants</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.modal('#modal').open()</code>
        </div>
    </a>

    <!-- Navbar -->
    <a href="/showcase/elements/navbar" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="menu"></div>
            <h3 class="card-title">Navbar</h3>
            <p class="card-text">Responsive navigation bar with mobile menu.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Mobile responsive</li>
                <li>Dropdown support</li>
                <li>Brand/logo area</li>
                <li>Fixed/sticky modes</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.navbar('#nav', { collapsible: true })</code>
        </div>
    </a>

    <!-- Sidebar -->
    <a href="/showcase/sidebar" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="sidebar"></div>
            <h3 class="card-title">Sidebar</h3>
            <p class="card-text">Navigation sidebar with unlimited depth nesting.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Unlimited depth menus</li>
                <li>Mobile drawer</li>
                <li>State persistence</li>
                <li>Light/dark themes</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.sidebar('#nav', { variant: 'dark' })</code>
        </div>
    </a>

    <!-- Footer -->
    <a href="/showcase/footer" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="layout"></div>
            <h3 class="card-title">Footer</h3>
            <p class="card-text">Page footer with three layout modes and theme variants.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Simple/columns/minimal</li>
                <li>Theme variants</li>
                <li>Social media icons</li>
                <li>Brand integration</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.footer('#footer', { layout: 'simple' })</code>
        </div>
    </a>

    <!-- Autocomplete -->
    <a href="/showcase/elements/autocomplete" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="search"></div>
            <h3 class="card-title">Autocomplete</h3>
            <p class="card-text">Text input with intelligent suggestion dropdown.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Static &amp; async data</li>
                <li>Match highlighting</li>
                <li>Keyboard navigation</li>
                <li>Model binding</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.autocomplete('#search', { data: [...] })</code>
        </div>
    </a>

    <!-- Pillbox -->
    <a href="/showcase/elements/pillbox" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="tag"></div>
            <h3 class="card-title">Pillbox</h3>
            <p class="card-text">Multi-select tag input with removable pills.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Tag creation</li>
                <li>Searchable dropdown</li>
                <li>Validation rules</li>
                <li>Model binding</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.pillbox('#tags', { creatable: true })</code>
        </div>
    </a>

    <!-- Chooser -->
    <a href="/showcase/elements/chooser" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="check-square"></div>
            <h3 class="card-title">Chooser</h3>
            <p class="card-text">Visual option-picker with cards or chips, single or multi-select.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Card or chip variants</li>
                <li>Per-option icons, badges, descriptions</li>
                <li>Keyboard accessible</li>
                <li>Blueprint-driven for forms</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.chooser('#host', { variant: 'card' })</code>
        </div>
    </a>

    <!-- TreeView -->
    <a href="/showcase/elements/treeview" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="folder"></div>
            <h3 class="card-title">TreeView</h3>
            <p class="card-text">Hierarchical tree structure with expand/collapse.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Nested nodes</li>
                <li>Checkboxes</li>
                <li>Lazy loading</li>
                <li>Keyboard navigation</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.treeview('#tree', { data: tree })</code>
        </div>
    </a>

    <!-- Editor -->
    <a href="/showcase/elements/editor" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="edit"></div>
            <h3 class="card-title">Editor</h3>
            <p class="card-text">Rich text editor with formatting tools.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Formatting toolbar</li>
                <li>HTML/Preview modes</li>
                <li>Image support</li>
                <li>Markdown export</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.editor('#editor', { toolbar: true })</code>
        </div>
    </a>

    <!-- Tabs -->
    <a href="/showcase/elements/tabs" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="layout"></div>
            <h3 class="card-title">Tabs</h3>
            <p class="card-text">Tabbed content panels with animations.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Animated transitions</li>
                <li>Vertical layout</li>
                <li>Dynamic tabs</li>
                <li>Keyboard navigation</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.tabs('#tabs', { activeIndex: 0 })</code>
        </div>
    </a>

    <!-- Timeline -->
    <a href="/showcase/elements/timeline" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="activity"></div>
            <h3 class="card-title">Timeline</h3>
            <p class="card-text">Chronological event display with multiple layouts.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Vertical &amp; horizontal</li>
                <li>Centered layout</li>
                <li>Custom styling</li>
                <li>Event markers</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.progression('#timeline', { mode: 'timeline', layout: 'centered' })</code>
        </div>
    </a>

    <!-- Tooltip -->
    <a href="/showcase/elements/tooltip" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="info"></div>
            <h3 class="card-title">Tooltip</h3>
            <p class="card-text">Contextual popups on hover or click.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Multiple triggers</li>
                <li>Smart positioning</li>
                <li>HTML content</li>
                <li>Custom styling</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>elements.tooltip('[title]', { trigger: 'hover' })</code>
        </div>
    </a>

    <!-- Popover -->
    <a href="/showcase/elements/popover" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="message-square"></div>
            <h3 class="card-title">Popover</h3>
            <p class="card-text">Rich panels anchored to a trigger - a title, content or a small form.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Click, hover, focus or manual</li>
                <li>Flips and shifts to stay on screen</li>
                <li>Focus moves in and comes back</li>
                <li>data-popover markup</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.popover('#help', { title, content })</code>
        </div>
    </a>

    <!-- Command Palette -->
    <a href="/showcase/elements/command-palette" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="search"></div>
            <h3 class="card-title">Command Palette</h3>
            <p class="card-text">A Cmd/Ctrl+K launcher - search every action and page from the keyboard.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Fuzzy search with highlights</li>
                <li>Nested pages and async search</li>
                <li>Recent commands</li>
                <li>Shortcut hints</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.commandPalette({ commands })</code>
        </div>
    </a>

    <!-- Dropzone -->
    <a href="/showcase/elements/dropzone" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="upload"></div>
            <h3 class="card-title">Dropzone</h3>
            <p class="card-text">Drop, browse or paste files - checked, previewed, submitted or uploaded.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Accept, size and count rules</li>
                <li>Image previews</li>
                <li>Submits with the form</li>
                <li>Uploads with progress</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.dropzone('#files', { accept, maxSize })</code>
        </div>
    </a>

    <!-- Focus Trap -->
    <a href="/showcase/elements/focus-trap" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="lock"></div>
            <h3 class="card-title">Focus Trap</h3>
            <p class="card-text">Keep Tab and focus inside a panel while it is open.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Live tabbable lookup</li>
                <li>Stacks with other traps</li>
                <li>Return focus on close</li>
                <li>Optional inert page</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.focusTrap('#panel').activate()</code>
        </div>
    </a>

    <!-- Range Slider -->
    <a href="/showcase/elements/range-slider" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="sliders"></div>
            <h3 class="card-title">Range Slider</h3>
            <p class="card-text">One value or two thumbs, with ticks, marks and a tooltip.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Dual-thumb ranges</li>
                <li>Full keyboard and ARIA</li>
                <li>Vertical and right-to-left</li>
                <li>Real range inputs for forms</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.rangeSlider('#price', { range: true })</code>
        </div>
    </a>

    <!-- Split Pane -->
    <a href="/showcase/elements/split-pane" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="columns"></div>
            <h3 class="card-title">Split Pane</h3>
            <p class="card-text">Resizable panes with draggable, keyboard-operable gutters.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>Side by side or stacked, nested</li>
                <li>Min / max in px or %, snapping</li>
                <li>Collapsible and remembered</li>
                <li>Separators with arrow keys</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.splitPane('#editor', { sizes: [30, 70] })</code>
        </div>
    </a>

    <!-- Virtual List -->
    <a href="/showcase/elements/virtual-list" class="card card-hover h-full flex flex-col no-underline text-inherit">
        <div class="card-body flex-1">
            <div class="mb-4 text-primary" data-icon="list"></div>
            <h3 class="card-title">Virtual List</h3>
            <p class="card-text">Huge lists that render only the rows in view, with infinite loading.</p>
            <ul class="list-none p-0 mt-4 feature-list-item-bullet">
                <li>100,000 rows, a handful in the DOM</li>
                <li>Fixed or measured heights</li>
                <li>loadMore with retry</li>
                <li>Keyboard navigation</li>
            </ul>
        </div>
        <div class="card-footer">
            <code>E.virtualList('#list', { items, render })</code>
        </div>
    </a>
</div>