e-dimensionz UI Component Library

Button UI Components

                Show HTML
              
                <!-- Primary -->
<button class="button button-primary">
  <span class="button-text">Button</span>
</button>

<!-- Secondary -->
<button class="button button-secondary">
  <span class="button-text">Button</span>
</button>

<!-- Ghost -->
<button class="button button-ghost">
  <span class="button-text">Button</span>
</button>

<!-- Loading State -->
<button class="button button-primary click-loading"
        data-action="loading"
        aria-busy="false">
  <span class="button-text">Button</span>
  <span class="loading-text"
        role="status"
        aria-live="polite"
        aria-atomic="true"
        hidden>Loading…</span>
  <span class="click-loading-spinner"></span>
</button>

<!-- Disabled -->
<button class="button" disabled>
  <span class="button-text">Button</span>
</button>

<!-- Icon Only -->
<button class="button button-primary button-icon-only"
        aria-label="Select">
  <i class="fa-solid fa-arrow-pointer" aria-hidden="true"></i>
</button>

<!-- Icon + Text -->
<button class="button button-primary">
  <i class="fa-solid fa-arrow-pointer" aria-hidden="true"></i>
  <span class="button-text">Button</span>
</button>

<!-- Pill Modifier -->
<button class="button button-primary button-pill">
  <span class="button-text">Button</span>
</button>

              

Input UI Components

Password

Textarea

Text Input

Number-Only Input

Dropdown / Select

Error Input

Checkboxes

Radio Buttons

                Show HTML
              
                
<!-- Default Password -->
<div class="input-toggle">
  <label for="password-default" class="visually-hidden">Password</label>
  <input
    type="password"
    id="password-default"
    class="input input-primary"
    placeholder="Enter password"
    autocomplete="current-password"
    aria-describedby="password-default-help"
    required
  />
  <p id="password-default-help" class="visually-hidden">Enter your password.</p>
  <button type="button" aria-label="Show password" aria-controls="password-default" data-action="toggle-password">
    <i class="fa-solid fa-eye" aria-hidden="true"></i>
    <i class="fa-solid fa-eye-slash" aria-hidden="true"></i>
  </button>
</div>

<!-- Pill Password -->
<div class="input-toggle">
  <label for="password-pill" class="visually-hidden">Password</label>
  <input
    type="password"
    id="password-pill"
    class="input input-primary input-pill"
    placeholder="Enter password"
    autocomplete="new-password"
    aria-describedby="password-pill-help"
    minlength="8"
    required
  />
  <p id="password-pill-help" class="visually-hidden">Enter at least 8 characters.</p>
  <button type="button" aria-label="Show password" aria-controls="password-pill" data-action="toggle-password">
    <i class="fa-solid fa-eye" aria-hidden="true"></i>
    <i class="fa-solid fa-eye-slash" aria-hidden="true"></i>
  </button>
</div>

<!-- Underline Password -->
<div class="input-toggle input-lines">
  <label for="password-underline" class="visually-hidden">Password</label>
  <input
    type="password"
    id="password-underline"
    class="input input-primary input-underline"
    placeholder="Enter password"
    aria-describedby="password-underline-help"
    required
  />
  <p id="password-underline-help" class="visually-hidden">Re-enter your password.</p>
  <button type="button" aria-label="Show password" aria-controls="password-underline" data-action="toggle-password">
    <i class="fa-solid fa-eye" aria-hidden="true"></i>
    <i class="fa-solid fa-eye-slash" aria-hidden="true"></i>
  </button>
</div>

<!-- Default Textarea -->
<textarea id="textarea-default" class="input input-primary input-textarea" placeholder="Lorem ipsum"></textarea>

<!-- Pill Textarea -->
<textarea id="textarea-pill" class="input input-primary input-textarea input-pill" placeholder="Lorem ipsum"></textarea>

<!-- Default Text Input -->
<input id="text-default" type="text" class="input input-primary" placeholder="Lorem ipsum" />

<!-- Pill Text Input -->
<input id="text-pill" type="text" class="input input-primary input-pill" placeholder="Lorem ipsum" />

<!-- Underline Text Input -->
<input id="text-underline" type="text" class="input input-primary input-underline" placeholder="Lorem ipsum" />


<!-- Default Number Input -->
<input id="num-default" type="number" class="input input-primary" placeholder="1234" />

<!-- Pill Number Input -->
<input id="num-pill" type="number" class="input input-primary input-pill" placeholder="1234" />

<!-- Underline Number Input -->
<input id="num-underline" type="number" class="input input-primary input-underline" placeholder="1234" />


<!-- Default Select -->
<div class="input-form-controls">
  <label for="select-default" class="visually-hidden">Select</label>
  <div class="input-form-body">
    <select id="select-default" class="input input-primary input-select" required>
      <option value="" selected disabled hidden>Please select</option>
      <option value="a">Lorem ipsum</option>
    </select>
  </div>
</div>

<!-- Pill Select -->
<div class="input-form-controls">
  <label for="select-pill" class="visually-hidden">Select pill</label>
  <div class="input-form-body">
    <select id="select-pill" class="input input-primary input-select input-pill" required>
      <option value="" selected disabled hidden>Please select</option>
      <option value="b">Lorem ipsum</option>
    </select>
  </div>
</div>

<!-- Underline Select -->
<div class="input-form-controls input-lines">
  <label for="select-underline" class="visually-hidden">Select underline</label>
  <div class="input-form-body">
    <select id="select-underline" class="input input-primary input-select input-underline" required>
      <option value="" selected disabled hidden>Please select</option>
      <option value="c">Lorem ipsum</option>
    </select>
  </div>
</div>

<!-- Default Error -->
<input id="error-default" type="text" class="input input-primary input-error" placeholder="Error" aria-invalid="true" />

<!-- Pill Error -->
<input id="error-pill" type="text" class="input input-primary input-error input-pill" placeholder="Error" aria-invalid="true" />

<!-- Underline Error -->
<input id="error-underline" type="text" class="input input-primary input-error input-underline" placeholder="Error" aria-invalid="true" />


<!-- Square Checkbox -->
<label class="checkbox checkbox-square">
  <input type="checkbox" />
  <span class="visually-hidden">Square checkbox</span>
  <span class="checkmark" aria-hidden="true"></span>
</label>

<!-- Round Checkbox -->
<label class="checkbox checkbox-round">
  <input type="checkbox" />
  <span class="visually-hidden">Round checkbox</span>
  <span class="checkmark" aria-hidden="true"></span>
</label>

<!-- Disabled Checkbox -->
<label class="checkbox checkbox-square checkbox-disabled">
  <input type="checkbox" disabled />
  <span class="visually-hidden">Disabled checkbox</span>
  <span class="checkmark" aria-hidden="true"></span>
</label>

<!-- Round Radio -->
<label class="radio radio-round">
  <input type="radio" name="radio-group" />
  <span class="visually-hidden">Round radio</span>
  <span class="checkmark" aria-hidden="true"></span>
</label>

<!-- Disabled Round Radio -->
<label class="radio radio-round radio-disabled">
  <input type="radio" name="radio-group" disabled />
  <span class="visually-hidden">Disabled round radio</span>
  <span class="checkmark" aria-hidden="true"></span>
</label>

              

Modal UI Components

Standard text modal

Feature modal

Confirmation modal

Full-screen modal

Show HTML
                <!-- Standard Center Modal -->
<div class="standard-modals center-modals" data-modal="center" role="dialog" aria-modal="true" aria-labelledby="modalDefaultTitle" aria-describedby="modalDefaultDesc" aria-hidden="true">
  <button type="button" class="button-primary button rounded">
    <span>Open Center Modal</span>
  </button>
</div>

<div id="modalOverlayDefault" class="modal-overlay" aria-hidden="true">
  <div class="modal-box" id="modalBox" role="dialog" aria-modal="true" aria-labelledby="modalDefaultTitle" aria-describedby="modalDefaultDesc">
    <button type="button" class="close-btn" aria-label="Close" data-modal-close>&times;</button>
    <div class="modal-content">
      <h3 id="modalDefaultTitle">Standard text modal</h3>
      <p id="modalDefaultDesc" class="visually-hidden">A modal containing informational text.</p>
    </div>
  </div>
</div>


<!-- Standard Side Drawer Modal -->
<div class="standard-modals side-drawer-modals" data-modal="side">
  <button type="button" class="button-primary button rounded">
    <span>Open Side Modal</span>
  </button>
</div>


<!-- Standard Scrollable Modal -->
<div class="standard-modals with-scroll-modals" data-modal="scroll" role="dialog" aria-modal="true" aria-labelledby="scrollTitle" aria-describedby="scrollDesc" aria-hidden="true">
  <button type="button" class="button-primary button rounded">
    <span>Open Scroll Modal</span>
  </button>
</div>


<!-- Feature Modal (Center) -->
<div class="feature-modals center-modals" data-modal-open="feature" role="dialog" aria-modal="true" aria-labelledby="featureModalTitle" aria-describedby="featureModalDesc" aria-hidden="true">
  <button type="button" class="button-primary button rounded">
    <span>Open Center Modal</span>
  </button>
</div>


<!-- Feature Modal (Side Drawer) -->
<div class="feature-modals side-drawer-modals" data-modal-open="feature" data-modal-layout="side" role="dialog" aria-modal="true" aria-labelledby="featureModalTitle" aria-describedby="featureModalDesc" aria-hidden="true">
  <button type="button" class="button-primary button rounded">
    <span>Open Side Modal</span>
  </button>
</div>


<!-- Feature Scrollable Modal -->
<div class="feature-modals with-scroll-modals" data-modal-open="feature-scroll" role="dialog" aria-modal="true" aria-labelledby="featureScrollTitle" aria-describedby="featureScrollDesc" aria-hidden="true">
  <button type="button" class="button-primary button rounded">
    <span>Open Scroll Modal</span>
  </button>
</div>


<!-- Confirmation Modal (Center) -->
<div class="confirmation-modals center-modals" data-modal-open="confirmation" role="dialog" aria-modal="true" aria-labelledby="confirmTitle" aria-describedby="confirmDesc" aria-hidden="true">
  <button type="button" class="button-primary button rounded">
    <span>Open Center Modal</span>
  </button>
</div>


<!-- Confirmation Modal (Side Drawer) -->
<div class="confirmation-modals side-drawer-modals" data-modal-open="confirmation" data-modal-layout="side">
  <button type="button" class="button-primary button rounded">
    <span>Open Side Modal</span>
  </button>
</div>


<!-- Confirmation Scrollable Modal -->
<div class="confirmation-modals with-scroll-modals" data-modal-open="confirmation-scroll" role="dialog" aria-modal="true" aria-labelledby="confirmScrollTitle" aria-describedby="confirmScrollDesc" aria-hidden="true">
  <button type="button" class="button-primary button rounded">
    <span>Open Scroll Modal</span>
  </button>
</div>


<!-- Full Screen Modal -->
<div class="full-screen-modals" data-modal-open="fullscreen">
  <button type="button" class="button-primary button rounded">
    <span>Open Full Screen Modal</span>
  </button>
</div>


<!-- Full Screen Scrollable Modal -->
<div class="full-screen-modals" data-modal-open="fullscreen-scroll" role="dialog" aria-modal="true" aria-labelledby="fsScrollTitle" aria-describedby="fsScrollDesc" aria-hidden="true">
  <button type="button" class="button-primary button rounded">
    <span>Open Full Screen Scroll Modal</span>
  </button>
</div>

              

Alert UI Components

Dismissable Alerts

Collapsible Alerts

Alert with icon

Alert without icon

Show HTML
                
                <div class="dismissable-alert-banner success" role="alert">
  <div class="alert-banner-content-two">
    <p><span>Success!</span> This alert indicates a positive action.</p>
    <button type="button" class="alert-dismiss" aria-label="Dismiss alert">
      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
    </button>
  </div>
</div>
                
<div class="alert-banner success">
  <div class="alert-banner-content-two">
    <button type="button" class="button-text alert-toggle" aria-expanded="false">
      Success
    </button>
    <i class="fa-solid fa-minus"></i>
    <i class="fa-solid fa-plus"></i>
  </div>

  <div class="alert-banner-content">
    <p>This alert indicates a successful or positive action.</p>
  </div>
</div>
                
<div class="alert-banner success with-icon" role="alert">
  <div class="alert-icon">
    <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
  </div>

  <div class="alert-banner-content-two">
    <p>This alert indicates a successful or positive action.</p>
  </div>
</div>
                
<div class="alert-banner success without-icon" role="alert">
  <div class="alert-banner-content-two">
    <p>This alert indicates a successful or positive action.</p>
  </div>
</div>

              

Table UI Components

Standard Table

Title Column	Column 1	Column 2	Column 3	Column 4
Title Row 1	Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Title Row 2	Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Title Row 3	Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Title Row 4	Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum

Scrollable Table with Sticky Header

Title Column	Column 1	Column 2	Column 3	Column 4	Column 5
Title Row	Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Title Row	Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Title Row	Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum

Searchable Table

Title Column	Column 1	Column 2	Column 3	Column 4
Title Column 1	Column 1 row 1	Column 2 row 1	Column 3 row 1	Column 4 row 1
Title Column 2	Column 1 row 2	Column 2 row 2	Column 3 row 2	Column 4 row 2
Title Column 3	Column 1 row 3	Column 2 row 3	Column 3 row 3	Column 4 row 3
Title Column 4	Column 1 row 3	Column 2 row 3	Column 3 row 3	Column 4 row 3

Show HTML
                
                <table class="table">
  <thead>
    <tr>
      <th scope="col">Title Column</th>
      <th scope="col">Column 1</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" data-label="Title Column">Title Row</th>
      <td data-label="Column 1">Lorem ipsum</td>
      <td data-label="Column 2">Lorem ipsum</td>
      <td data-label="Column 3">Lorem ipsum</td>
      <td data-label="Column 4">Lorem ipsum</td>
    </tr>
  </tbody>
</table>
                
<div class="scrollable-table">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Title Column</th>
        <th scope="col">Column 1</th>
        <th scope="col">Column 2</th>
        <th scope="col">Column 3</th>
        <th scope="col">Column 4</th>
        <th scope="col">Column 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" data-label="Title Column">Title Row</th>
        <td data-label="Column 1">Lorem ipsum</td>
        <td data-label="Column 2">Lorem ipsum</td>
        <td data-label="Column 3">Lorem ipsum</td>
        <td data-label="Column 4">Lorem ipsum</td>
        <td data-label="Column 5">Lorem ipsum</td>
      </tr>
    </tbody>
  </table>
</div>
                
<div class="searchable-table">
  <div class="search-wrapper">
    <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
    <label for="search-names" class="visually-hidden">Search table</label>
    <input
      type="text"
      id="search-names"
      oninput="searchTable()"
      placeholder="Search..."
    />
  </div>

  <table class="table" id="myTable">
    <thead>
      <tr>
        <th scope="col">Title Column</th>
        <th scope="col">Column 1</th>
        <th scope="col">Column 2</th>
        <th scope="col">Column 3</th>
        <th scope="col">Column 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" data-label="Title Column">Title Column</th>
        <td data-label="Column 1">Column 1 row</td>
        <td data-label="Column 2">Column 2 row</td>
        <td data-label="Column 3">Column 3 row</td>
        <td data-label="Column 4">Column 4 row</td>
      </tr>
    </tbody>
  </table>
</div>
              

Breadcrumb UI Components

Simple Breadcrumbs

Clickable Breadcrumbs

Collapsed Breadcrumbs

Show HTML
                
                <nav class="breadcrumb slashes" aria-label="Breadcrumb">
  <ol>
    <li><a href="/"><i class="fa-solid fa-house"></i> Home</a></li>
    <li><a href="/#">Category</a></li>
    <li aria-current="page"><span>Page</span></li>
  </ol>
</nav>
                
<nav class="clickable-breadcrumb slashes" aria-label="Breadcrumb">
  <ol>
    <li><a href="/"><i class="fa-solid fa-house"></i> Home</a></li>
    <li><a href="/#">Category</a></li>
    <li aria-current="page"><span>Page</span></li>
  </ol>
</nav>
                
<nav class="collapsed-breadcrumb slashes" aria-label="Breadcrumb">
  <ol>
    <li><a href="/"><i class="fa-solid fa-house"></i> Home</a></li>
    <li><a href="/#">Category</a></li>
    <li><a href="/#">Subcategory</a></li>
    <li><a href="/#">Topic</a></li>
    <li aria-current="page"><span>Page</span></li>
  </ol>
</nav>

              

Navigation UI Components

Top Navigation Bar

Sidebar Navigation

Tab Navigation

Tab 1

This is the content for Tab 1. You should see this text only when Tab 1 is active.

Tab 1

This is the content for Tab 1. You should see this text only when Tab 1 is active.

Show HTML
                <nav class="topnav" aria-label="Main navigation">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
</nav>

<nav class="topnav active-topnav" aria-label="Main navigation with active tab">
  <a href="#" class="active" aria-current="page">Home</a>
  <a href="#">News</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
</nav>

<nav class="topnav" aria-label="Main navigation with dropdown">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Contact</a>
  <a href="#">About</a>

  <div class="dropdown" data-dropdown>
    <button
      class="dropbtn"
      data-dropdown-toggle
      id="nav-dd-1"
      aria-haspopup="menu"
      aria-expanded="false"
      aria-controls="nav-dd-1-menu"
    >
      Dropdown <i class="fa fa-caret-down" aria-hidden="true"></i>
    </button>

    <div
      class="dropdown-content"
      id="nav-dd-1-menu"
      role="menu"
      aria-labelledby="nav-dd-1"
      hidden
    >
      <a href="#" role="menuitem" tabindex="-1">Link 1</a>
      <a href="#" role="menuitem" tabindex="-1">Link 2</a>
      <a href="#" role="menuitem" tabindex="-1">Link 3</a>
    </div>
  </div>
</nav>

<nav class="sidenav" aria-label="Side navigation">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
</nav>

<nav class="sidenav active-sidenav" aria-label="Side navigation with active tab">
  <a href="#" class="active" aria-current="page">Home</a>
  <a href="#">News</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
</nav>

<nav class="sidenav" aria-label="Side navigation with dropdown">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Contact</a>
  <a href="#">About</a>

  <div class="sidenav-dropdown" data-dropdown>
    <button
      class="dropbtn"
      data-dropdown-toggle
      id="side-dd-1"
      aria-haspopup="menu"
      aria-expanded="false"
      aria-controls="side-dd-1-menu"
    >
      Dropdown <i class="fa fa-caret-down"></i>
    </button>

    <div
      class="sidenav-dropdown-content"
      id="side-dd-1-menu"
      role="menu"
      aria-labelledby="side-dd-1"
      hidden
    >
      <a href="#" role="menuitem" tabindex="-1">Link A</a>
      <a href="#" role="menuitem" tabindex="-1">Link B</a>
      <a href="#" role="menuitem" tabindex="-1">Link C</a>
    </div>
  </div>
</nav>

<div class="tab-nav" role="tablist" aria-label="Tabs navigation" data-tab-group="group1">
  <button
    id="g1-tab-1"
    role="tab"
    aria-selected="true"
    aria-controls="g1-panel-1"
    data-tab-target="tab-one"
    data-tab-group="group1"
  >Tab 1</button>

  <button
    id="g1-tab-2"
    role="tab"
    aria-selected="false"
    aria-controls="g1-panel-2"
    data-tab-target="tab-two"
    data-tab-group="group1"
  >Tab 2</button>

  <button
    id="g1-tab-3"
    role="tab"
    aria-selected="false"
    aria-controls="g1-panel-3"
    data-tab-target="tab-three"
    data-tab-group="group1"
  >Tab 3</button>
</div>

<div class="tab-content" data-tab-group="group1">
  <div
    id="g1-panel-1"
    class="tab-one tab-panel"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="g1-tab-1"
  >
    <h4>Tab 1</h4>
    <p>Content for Tab 1.</p>
  </div>

  <div
    id="g1-panel-2"
    class="tab-two tab-panel"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="g1-tab-2"
    hidden
  >
    <h4>Tab 2</h4>
    <p>Content for Tab 2.</p>
  </div>

  <div
    id="g1-panel-3"
    class="tab-three tab-panel"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="g1-tab-3"
    hidden
  >
    <h4>Tab 3</h4>
    <p>Content for Tab 3.</p>
  </div>
</div>

<div class="tab-nav-active" role="tablist" aria-label="Active style tabs" data-tab-group="group2">
  <button
    id="g2-tab-1"
    role="tab"
    aria-selected="true"
    aria-controls="g2-panel-1"
    data-tab-target="tab-one-active"
    data-tab-group="group2"
  >Tab 1</button>

  <button
    id="g2-tab-2"
    role="tab"
    aria-selected="false"
    aria-controls="g2-panel-2"
    data-tab-target="tab-two-active"
    data-tab-group="group2"
  >Tab 2</button>

  <button
    id="g2-tab-3"
    role="tab"
    aria-selected="false"
    aria-controls="g2-panel-3"
    data-tab-target="tab-three-active"
    data-tab-group="group2"
  >Tab 3</button>
</div>

<div class="tab-content" data-tab-group="group2">
  <div
    id="g2-panel-1"
    class="tab-one-active tab-panel"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="g2-tab-1"
  >
    <h4>Tab 1</h4>
    <p>Content for Tab 1.</p>
  </div>

  <div
    id="g2-panel-2"
    class="tab-two-active tab-panel"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="g2-tab-2"
    hidden
  >
    <h4>Tab 2</h4>
    <p>Content for Tab 2.</p>
  </div>

  <div
    id="g2-panel-3"
    class="tab-three-active tab-panel"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="g2-tab-3"
    hidden
  >
    <h4>Tab 3</h4>
    <p>Content for Tab 3.</p>
  </div>
</div>

<div class="tab-nav" role="tablist" aria-label="Tabs with dropdown" data-tab-group="group3">
  <button
    id="g3-tab-1"
    role="tab"
    aria-selected="true"
    aria-controls="g3-panel-1"
    data-tab-target="tab-one-dropdown"
    data-tab-group="group3"
  >
    Tab 1 <i class="fa fa-caret-down"></i>
  </button>

  <button
    id="g3-tab-2"
    role="tab"
    aria-selected="false"
    aria-controls="g3-panel-2"
    data-tab-target="tab-two-dropdown"
    data-tab-group="group3"
  >
    Tab 2 <i class="fa fa-caret-down"></i>
  </button>

  <div class="dropdown" data-dropdown>
    <button
      id="g3-tab-3"
      role="tab"
      aria-selected="false"
      aria-controls="g3-panel-3"
      data-tab-target="tab-three-dropdown"
      data-tab-group="group3"
    >
      Tab 3 <i class="fa fa-caret-down"></i>
    </button>
  </div>

</div>

<div class="tab-content" data-tab-group="group3">
  <div
    id="g3-panel-1"
    class="tab-one-dropdown tab-panel"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="g3-tab-1"
  >
    <h4>Tab 1</h4>
    <p>Content for Tab 1.</p>
  </div>

  <div
    id="g3-panel-2"
    class="tab-two-dropdown tab-panel"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="g3-tab-2"
    hidden
  >
    <h4>Tab 2</h4>
    <p>Content for Tab 2.</p>
  </div>

  <div
    id="g3-panel-3"
    class="tab-three-dropdown tab-panel"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="g3-tab-3"
    hidden
  >
    <h4>Tab 3</h4>
    <p>Content for Tab 3.</p>
  </div>
</div>
              

Pagination UI Components

Numbered Pagination

1 2 3 4 5

Next / Previous Pagination

« 1 2 3 4 5 »

Load More Button Pagination

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est at dolor consequat porta.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est at dolor consequat porta.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est at dolor consequat porta.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est at dolor consequat porta.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est at dolor consequat porta.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est at dolor consequat porta.

Show HTML
                <nav class="paginations" aria-label="Page navigation">
  <a href="#" class="page active" aria-current="page">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
  <a href="#" class="page">4</a>
  <a href="#" class="page">5</a>
</nav>

<nav class="paginations" aria-label="Page navigation" aria-disabled="true">
  <a href="#" class="page active" aria-current="page">1</a>
  <a href="#" class="page" tabindex="-1" aria-disabled="true">2</a>
  <a href="#" class="page" tabindex="-1" aria-disabled="true">3</a>
  <a href="#" class="page" tabindex="-1" aria-disabled="true">4</a>
  <a href="#" class="page" tabindex="-1" aria-disabled="true">5</a>
</nav>

<nav class="paginations-nav" aria-label="Previous and next page navigation">
  <a href="#" class="prev" aria-label="Previous page">&laquo;</a>

  <a href="#" class="page active" aria-current="page">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
  <a href="#" class="page">4</a>
  <a href="#" class="page">5</a>

  <a href="#" class="next" aria-label="Next page">&raquo;</a>
</nav>

<nav class="paginations-nav" aria-label="Pagination disabled" aria-disabled="true">
  <a href="#" class="prev" tabindex="-1" aria-disabled="true">&laquo;</a>

  <a href="#" class="page active" aria-current="page">1</a>
  <a href="#" class="page" tabindex="-1" aria-disabled="true">2</a>
  <a href="#" class="page" tabindex="-1" aria-disabled="true">3</a>
  <a href="#" class="page" tabindex="-1" aria-disabled="true">4</a>
  <a href="#" class="page" tabindex="-1" aria-disabled="true">5</a>

  <a href="#" class="next" tabindex="-1" aria-disabled="true">&raquo;</a>
</nav>

<div class="flex-col card-container">
  <div class="cards rounded">
    <h4><a href="#">Lorem ipsum</a></h4>
    <p>Short description text.</p>
  </div>

  <div class="cards rounded card-hidden">
    <h4><a href="#">Lorem ipsum</a></h4>
    <p>Short description text.</p>
  </div>

  <button id="load-more" type="button" class="button-primary button rounded">
    <span class="button-text">Load more</span>
  </button>
</div>
              