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>
                
              

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

Show HTML
                <!-- 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>
                
              

Show HTML
                <!-- 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>
                
              

Input UI Components

Password

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>
                
              

Textarea

Show HTML
                <!-- 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>
                
              

Text Input

Show HTML
                <!-- 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" />
                
              

Number-Only Input

Show HTML
                <!-- 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" />
                
              

Dropdown / Select

Show HTML
                <!-- 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>
                
              

Error Input

Show HTML
                <!-- 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" />
                
              

Checkboxes

Show HTML
                <!-- 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>
                
              

Radio Buttons

Show HTML
                <!-- 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

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

Show HTML
                <!-- Feature Modal (Center) -->
<div class="feature-modals center-modals" data-modal-open="feature" role="dialog" aria-modal="true" 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-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

Show HTML
                <!-- 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

Show HTML
                <!-- 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

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>
                
              

Collapsible Alerts

Show HTML
                <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>
                
              

Alert with icon

Show HTML
                <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>
                
              

Alert without icon

Show HTML
                <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

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>
              
              

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

Show HTML
                <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>
              
              

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
                <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

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>
                
              

Clickable Breadcrumbs

Show HTML
                <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>
                
              

Collapsed Breadcrumbs

Show HTML
                <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

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>
                
              

Sidebar Navigation

Show HTML
                <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>
                
              

Pagination UI Components

Numbered Pagination

1 2 3 4 5

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>
                
              

Next / Previous Pagination

« 1 2 3 4 5 »

Show HTML
                <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>
                
              

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
                <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>
              
              