Tables

Tables are used to organize and display data efficiently.

Tables

Used to organize and display data efficiently.

Tables



Simple table


Table Header

Headline Col One Headline Col Two
Bronchitis Acute or Chronic bronchitis
DVT History of DVT or chronic DVT
CVA History of CVA with no lasting effects
Neuropathy Peripheral neuropathy of feet due to type 2 DM
Depression Major depression disorder, single episode, mild
Hepatitis C Chronic Hepatitis C

HTML
<div class="table-wrap table-wrap-small">
  <h4 class="table-headline">Table Header</h4>
  <table class="table table-simple table-striped">
    <thead>
      <tr>
        <th>Headline Col One</th>
        <th>Headline Col Two</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Bronchitis</td>
        <td>Acute or Chronic bronchitis</td>
      </tr>
      <tr>
        <td>DVT</td>
        <td>History of DVT or chronic DVT</td>
      </tr>
      <tr>
        <td>CVA</td>
        <td>History of CVA with no lasting effects</td>
      </tr>
      <tr>
        <td>Neuropathy</td>
        <td>Peripheral neuropathy of feet due to type 2 DM</td>
      </tr>
      <tr>
        <td>Depression</td>
        <td>Major depression disorder, single episode, mild</td>
      </tr>
      <tr>
        <td>Hepatitis C</td>
        <td>Chronic Hepatitis C</td>
      </tr>
    </tbody>
  </table>
</div>


Benefirt table


Benefits and Features Viva Medicare Original Medicare
Dental Benefits with No Prior Authorizations Required Yes! No
Vision Coverage and Eyewear Allowance Yes! No
Coverage for Hearing Exams and Hearing Devices Yes! No
Part B Premium Buy-Down2 (lowers the cost of your Part B premium every month; available on select plans) Yes! No
$0 Primary Care Provider Yes! No

HTML
<div class="table-wrap table-wrap-medium">
  <div class="table-overflow">
    <table class="table table-benefits">
      <thead>
        <tr>
          <th>Benefits and Features</th>
          <th><strong class="small-caps">Viva Medicare</strong></th>
          <th>Original Medicare</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Dental Benefits with No Prior Authorizations Required</td>
          <td><strong>Yes!</strong></td>
          <td>No</td>
        </tr>
        <tr>
          <td>Vision Coverage and Eyewear Allowance</td>
          <td><strong>Yes!</strong></td>
          <td>No</td>
        </tr>
        <tr>
          <td>Coverage for Hearing Exams and Hearing Devices</td>
          <td><strong>Yes!</strong></td>
          <td>No</td>
        </tr>
        <tr>
          <td>Part B Premium Buy-Down2 (lowers the cost of your Part B premium every month; available on select plans)</td>
          <td><strong>Yes!</strong></td>
          <td>No</td>
        </tr>
        <tr>
          <td>$0 Primary Care Provider</td>
          <td><strong>Yes!</strong></td>
          <td>No</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


Team members table


Table Header

Role Email address Teams
Olivia Rhye olivia@vivahealth.com
Active Product Designer olivia@vivahealth.com
Label Label Label + 4
Olivia Rhye olivia@vivahealth.com
Active Product Designer olivia@vivahealth.com
Label Label Label + 4

HTML
<div class="table-wrap">
  <div class="table-header">
    <h4 class="table-headline">Table Header</h4>
    <div class="table-filters-bar">
      <div class="js-filters">
        <div class="table-years">
          <label class="table-year">
            <input type="radio" id="year-all" name="years" value="All" checked>
            <span>All</span>
          </label>
          <label class="table-year">
            <input type="radio" id="year-2024" name="years" value="2024">
            <span>2024</span>
          </label>
          <label class="table-year">
            <input type="radio" id="year-2025" name="years" value="2025">
            <span>2025</span>
          </label>
        </div>
      </div>

      <div class="d-flex gap-gutter">
        <div class="table-mobile-filtres-btn js-table-filters-btn">
          <i class="fa-regular fa-filter"></i>
        </div>
        <div class="table-search-wrap search-wrap js-table-search">
          <input type="text" class="form-field" placeholder="Search">
        </div>
        <a href="#" class="btn btn-secondary">Download</a>
      </div>
    </div>
  </div>
  
  <div class="table-overflow">
    <table class="table table-filters">
      <thead>
        <tr>
          <th>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <button class="table-sort">
                Name
              </button>
            </div>
          </th>
          <th class="th-status">
            <button class="table-sort desc">
              Status
            </button>
          </th>
          <th>
            Role
            <span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="top">
              <i class="fa-regular fa-circle-question text-teal"></i>
            </span>
          </th>
          <th>
            Email address
          </th>
          <th>
            Teams
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <div class="table-user">
                <span class="text-semibold">Olivia Rhye</span>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-green">Active</span>
          </td>
          <td>Product Designer</td>
          <td>olivia@vivahealth.com</td>
          <td>
            <div class="table-badges">
              <span class="badge badge-primary">Label</span>
              <span class="badge badge-purple">Label</span>
              <span class="badge badge-blue">Label</span>
              <span class="badge badge-gray">+ 4</span>
            </div>
          </td>
          <td>
            <div class="table-actions">
              <div class="btns-group center">
                <button class="btn btn-icon"><i class="fa-regular fa-trash-can"></i></button>
                <button class="btn btn-icon"><i class="fa-regular fa-pen"></i></button>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <div class="table-user">
                <span class="text-semibold">Olivia Rhye</span>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-green">Active</span>
          </td>
          <td>Product Designer</td>
          <td>olivia@vivahealth.com</td>
          <td>
            <div class="table-badges">
              <span class="badge badge-primary">Label</span>
              <span class="badge badge-purple">Label</span>
              <span class="badge badge-blue">Label</span>
              <span class="badge badge-gray">+ 4</span>
            </div>
          </td>
          <td>
            <div class="table-actions">
              <div class="btns-group center">
                <button class="btn btn-icon"><i class="fa-regular fa-trash-can"></i></button>
                <button class="btn btn-icon"><i class="fa-regular fa-pen"></i></button>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="table-pagination">
    <div class="pagination pagination-space-between">
      <a href="#" class="btn btn-simple">Prev</a>
      <div class="pagination-mobile">
        <select name="pagination-table-mobile" id="pagination-table-mobile" class="pagination-select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
        <span>of 10 pages</span>
      </div>
      <ul class="pagination-list">
        <li class="pagination-item"><a href="#" class="pagination-link">1</a></li>
        <li class="pagination-item pagination-item-current"><span class="pagination-link">2</span></li>
        <li class="pagination-item"><a href="#" class="pagination-link">3</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">4</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">5</a></li>
        <li class="pagination-item pagination-item-dots">
          <span class="pagination-link"><i class="fa-solid fa-ellipsis"></i></span>
          <ul class="sub-pagination-list">
            <li class="pagination-item"><a href="#" class="pagination-link">6</a></li>
            <li class="pagination-item"><a href="#" class="pagination-link">7</a></li>
            <li class="pagination-item"><a href="#" class="pagination-link">8</a></li>
          </ul>
        </li>
        <li class="pagination-item"><a href="#" class="pagination-link">9</a></li>
      </ul>
      <a href="#" class="btn btn-simple">Next</a>
    </div>
  </div>
</div>


Team members table striped


Table Header

Role Email address Teams
Olivia Rhye olivia@vivahealth.com
Active Product Designer olivia@vivahealth.com
Label Label Label + 4
Olivia Rhye olivia@vivahealth.com
Active Product Designer olivia@vivahealth.com
Label Label Label + 4

HTML
<div class="table-wrap">
  <h4 class="table-headline">Table Header</h4>
  
  <div class="table-overflow">
    <table class="table table-filters table-striped">
      <thead>
        <tr>
          <th>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <button class="table-sort">
                Name
              </button>
            </div>
          </th>
          <th class="th-status">
            <button class="table-sort">
              Status
            </button>
          </th>
          <th>
            Role
            <span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="top">
              <i class="fa-regular fa-circle-question text-teal"></i>
            </span>
          </th>
          <th>
            Email address
          </th>
          <th>
            Teams
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <div class="table-user">
                <span class="text-semibold">Olivia Rhye</span>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-green">Active</span>
          </td>
          <td>Product Designer</td>
          <td>olivia@vivahealth.com</td>
          <td>
            <div class="table-badges">
              <span class="badge badge-primary">Label</span>
              <span class="badge badge-purple">Label</span>
              <span class="badge badge-blue">Label</span>
              <span class="badge badge-gray">+ 4</span>
            </div>
          </td>
          <td>
            <div class="btns-group center">
              <button class="btn btn-icon"><i class="fa-regular fa-trash-can"></i></button>
              <button class="btn btn-icon"><i class="fa-regular fa-pen"></i></button>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <div class="table-user">
                <span class="text-semibold">Olivia Rhye</span>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-green">Active</span>
          </td>
          <td>Product Designer</td>
          <td>olivia@vivahealth.com</td>
          <td>
            <div class="table-badges">
              <span class="badge badge-primary">Label</span>
              <span class="badge badge-purple">Label</span>
              <span class="badge badge-blue">Label</span>
              <span class="badge badge-gray">+ 4</span>
            </div>
          </td>
          <td>
            <div class="table-actions">
              <div class="btns-group center">
                <button class="btn btn-icon"><i class="fa-regular fa-trash-can"></i></button>
                <button class="btn btn-icon"><i class="fa-regular fa-pen"></i></button>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="table-pagination">
    <div class="pagination pagination-space-between">
      <a href="#" class="btn btn-simple">Prev</a>
      <div class="pagination-mobile">
        <select name="pagination-table-mobile" id="pagination-table-mobile" class="pagination-select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
        <span>of 10 pages</span>
      </div>
      <ul class="pagination-list">
        <li class="pagination-item"><a href="#" class="pagination-link">1</a></li>
        <li class="pagination-item pagination-item-current"><span class="pagination-link">2</span></li>
        <li class="pagination-item"><a href="#" class="pagination-link">3</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">4</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">5</a></li>
        <li class="pagination-item pagination-item-dots">
          <span class="pagination-link"><i class="fa-solid fa-ellipsis"></i></span>
          <ul class="sub-pagination-list">
            <li class="pagination-item"><a href="#" class="pagination-link">6</a></li>
            <li class="pagination-item"><a href="#" class="pagination-link">7</a></li>
            <li class="pagination-item"><a href="#" class="pagination-link">8</a></li>
          </ul>
        </li>
        <li class="pagination-item"><a href="#" class="pagination-link">9</a></li>
      </ul>
      <a href="#" class="btn btn-simple">Next</a>
    </div>
  </div>
</div>


Sales table


Table Header

Date Status Customer Plan
#3066
Jan 6, 2025 In Progress
Name
Olivia Rhye olivia@vivahealth.com
Viva Health
#3062
Jan 6, 2025 Complete
Name
Olivia Rhye olivia@vivahealth.com
Viva Health UAB
#3066
Jan 6, 2025 Cancelled
Name
Olivia Rhye olivia@vivahealth.com
Viva Medicare Plus

HTML
<div class="table-wrap">
  <h4 class="table-headline">Table Header</h4>
  
  <div class="table-overflow">
    <table class="table table-sales">
      <thead>
        <tr>
          <th>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <button class="table-sort">
                Claim #
              </button>
            </div>
          </th>
          <th>
            Date
          </th>
          <th class="th-status">
            Status
          </th>
          <th>
            Customer
          </th>
          <th>
            Plan
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <span class="text-semibold">#3066</span>
            </div>
          </td>
          <td>
            Jan 6, 2025
          </td>
          <td>
            <span class="badge badge-green">
              <i class="fa-solid fa-check"></i>
              In Progress
            </span>
          </td>
          <td>
            <div class="d-flex">
              <div class="table-photo">
                <img src="img/users/Avatar.png" alt="Name">
              </div>
              <div class="table-user">
                <strong>Olivia Rhye</strong>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <div class="table-badges">
              <span class="small-caps">Viva Health</span>
            </div>
          </td>
          <td>
            <div class="btns-group">
              <a href="#" class="inline-link text-gray">Edit</a>
              <a href="#" class="inline-link">Download</a>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <span class="text-semibold">#3062</span>
            </div>
          </td>
          <td>
            Jan 6, 2025
          </td>
          <td>
            <span class="badge badge-gray">
              <i class="fa-solid fa-check"></i>
              Complete
            </span>
          </td>
          <td>
            <div class="d-flex">
              <div class="table-photo">
                <img src="img/users/Avatar2.png" alt="Name">
              </div>
              <div class="table-user">
                <strong>Olivia Rhye</strong>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <div class="table-badges">
              <span class="small-caps">Viva Health UAB</span>
            </div>
          </td>
          <td>
            <div class="btns-group">
              <a href="#" class="inline-link text-gray">Edit</a>
              <a href="#" class="inline-link">Download</a>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <span class="text-semibold">#3066</span>
            </div>
          </td>
          <td>
            Jan 6, 2025
          </td>
          <td>
            <span class="badge badge-red">
              <i class="fa-solid fa-xmark"></i>
              Cancelled
            </span>
          </td>
          <td>
            <div class="d-flex">
              <div class="table-photo">
                <img src="img/users/Avatar3.png" alt="Name">
              </div>
              <div class="table-user">
                <strong>Olivia Rhye</strong>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <div class="table-badges">
              <span class="small-caps">Viva Medicare</span> <em>Plus</em>
            </div>
          </td>
          <td>
            <div class="btns-group">
              <a href="#" class="inline-link text-gray">Edit</a>
              <a href="#" class="inline-link">Download</a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="table-pagination">
    <div class="pagination pagination-space-between">
      <a href="#" class="btn btn-simple">Prev</a>
      <div class="pagination-mobile">
        <select name="pagination-table-mobile" id="pagination-table-mobile" class="pagination-select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
        <span>of 10 pages</span>
      </div>
      <ul class="pagination-list">
        <li class="pagination-item"><a href="#" class="pagination-link">1</a></li>
        <li class="pagination-item pagination-item-current"><span class="pagination-link">2</span></li>
        <li class="pagination-item"><a href="#" class="pagination-link">3</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">4</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">5</a></li>
        <li class="pagination-item pagination-item-dots">
          <span class="pagination-link"><i class="fa-solid fa-ellipsis"></i></span>
          <ul class="sub-pagination-list">
            <li class="pagination-item"><a href="#" class="pagination-link">6</a></li>
            <li class="pagination-item"><a href="#" class="pagination-link">7</a></li>
            <li class="pagination-item"><a href="#" class="pagination-link">8</a></li>
          </ul>
        </li>
        <li class="pagination-item"><a href="#" class="pagination-link">9</a></li>
      </ul>
      <a href="#" class="btn btn-simple">Next</a>
    </div>
  </div>
</div>


Sales table striped


Table Header

Date Status Customer Plan
#3066
Jan 6, 2025 In Progress
Name
Olivia Rhye olivia@vivahealth.com
Viva Health
#3062
Jan 6, 2025 Complete
Name
Olivia Rhye olivia@vivahealth.com
Viva Health UAB
#3066
Jan 6, 2025 Cancelled
Name
Olivia Rhye olivia@vivahealth.com
Viva Medicare Plus

HTML
<div class="table-wrap">
  <h4 class="table-headline">Table Header</h4>
  
  <div class="table-overflow">
    <table class="table table-sales table-striped">
      <thead>
        <tr>
          <th>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <button class="table-sort">
                Claim #
              </button>
            </div>
          </th>
          <th>
            Date
          </th>
          <th class="th-status">
            Status
          </th>
          <th>
            Customer
          </th>
          <th>
            Plan
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <span class="text-semibold">#3066</span>
            </div>
          </td>
          <td>
            Jan 6, 2025
          </td>
          <td>
            <span class="badge badge-green">
              <i class="fa-solid fa-check"></i>
              In Progress
            </span>
          </td>
          <td>
            <div class="d-flex">
              <div class="table-photo">
                <img src="img/users/Avatar.png" alt="Name">
              </div>
              <div class="table-user">
                <strong>Olivia Rhye</strong>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <div class="table-badges">
              <span class="small-caps">Viva Health</span>
            </div>
          </td>
          <td>
            <div class="btns-group">
              <a href="#" class="inline-link text-gray">Edit</a>
              <a href="#" class="inline-link">Download</a>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <span class="text-semibold">#3062</span>
            </div>
          </td>
          <td>
            Jan 6, 2025
          </td>
          <td>
            <span class="badge badge-gray">
              <i class="fa-solid fa-check"></i>
              Complete
            </span>
          </td>
          <td>
            <div class="d-flex">
              <div class="table-photo">
                <img src="img/users/Avatar2.png" alt="Name">
              </div>
              <div class="table-user">
                <strong>Olivia Rhye</strong>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <div class="table-badges">
              <span class="small-caps">Viva Health UAB</span>
            </div>
          </td>
          <td>
            <div class="btns-group">
              <a href="#" class="inline-link text-gray">Edit</a>
              <a href="#" class="inline-link">Download</a>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <span class="text-semibold">#3066</span>
            </div>
          </td>
          <td>
            Jan 6, 2025
          </td>
          <td>
            <span class="badge badge-red">
              <i class="fa-solid fa-xmark"></i>
              Cancelled
            </span>
          </td>
          <td>
            <div class="d-flex">
              <div class="table-photo">
                <img src="img/users/Avatar3.png" alt="Name">
              </div>
              <div class="table-user">
                <strong>Olivia Rhye</strong>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <div class="table-badges">
              <span class="small-caps">Viva Medicare</span> <em>Plus</em>
            </div>
          </td>
          <td>
            <div class="btns-group">
              <a href="#" class="inline-link text-gray">Edit</a>
              <a href="#" class="inline-link">Download</a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="table-pagination">
    <div class="pagination pagination-space-between">
      <a href="#" class="btn btn-simple">Prev</a>
      <div class="pagination-mobile">
        <select name="pagination-table-mobile" id="pagination-table-mobile" class="pagination-select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
        <span>of 10 pages</span>
      </div>
      <ul class="pagination-list">
        <li class="pagination-item"><a href="#" class="pagination-link">1</a></li>
        <li class="pagination-item pagination-item-current"><span class="pagination-link">2</span></li>
        <li class="pagination-item"><a href="#" class="pagination-link">3</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">4</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">5</a></li>
        <li class="pagination-item pagination-item-dots">
          <span class="pagination-link"><i class="fa-solid fa-ellipsis"></i></span>
          <ul class="sub-pagination-list">
            <li class="pagination-item"><a href="#" class="pagination-link">6</a></li>
            <li class="pagination-item"><a href="#" class="pagination-link">7</a></li>
            <li class="pagination-item"><a href="#" class="pagination-link">8</a></li>
          </ul>
        </li>
        <li class="pagination-item"><a href="#" class="pagination-link">9</a></li>
      </ul>
      <a href="#" class="btn btn-simple">Next</a>
    </div>
  </div>
</div>


Sales table striped, grenn header


Table Header

Date Status Customer Plan
#3066
Jan 6, 2025 In Progress
Name
Olivia Rhye olivia@vivahealth.com
Viva Health
#3062
Jan 6, 2025 Complete
Name
Olivia Rhye olivia@vivahealth.com
Viva Health UAB
#3066
Jan 6, 2025 Cancelled
Name
Olivia Rhye olivia@vivahealth.com
Viva Medicare Plus

HTML
<div class="table-wrap">
  <h4 class="table-headline">Table Header</h4>
  
  <div class="table-overflow">
    <table class="table table-sales table-striped table-header-green">
      <thead>
        <tr>
          <th>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <button class="table-sort">
                Claim #
              </button>
            </div>
          </th>
          <th>
            Date
          </th>
          <th class="th-status">
            Status
          </th>
          <th>
            Customer
          </th>
          <th>
            Plan
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <span class="text-semibold">#3066</span>
            </div>
          </td>
          <td>
            Jan 6, 2025
          </td>
          <td>
            <span class="badge badge-green">
              <i class="fa-solid fa-check"></i>
              In Progress
            </span>
          </td>
          <td>
            <div class="d-flex">
              <div class="table-photo">
                <img src="img/users/Avatar.png" alt="Name">
              </div>
              <div class="table-user">
                <strong>Olivia Rhye</strong>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <div class="table-badges">
              <span class="small-caps">Viva Health</span>
            </div>
          </td>
          <td>
            <div class="btns-group">
              <a href="#" class="inline-link text-gray">Edit</a>
              <a href="#" class="inline-link">Download</a>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <span class="text-semibold">#3062</span>
            </div>
          </td>
          <td>
            Jan 6, 2025
          </td>
          <td>
            <span class="badge badge-gray">
              <i class="fa-solid fa-check"></i>
              Complete
            </span>
          </td>
          <td>
            <div class="d-flex">
              <div class="table-photo">
                <img src="img/users/Avatar2.png" alt="Name">
              </div>
              <div class="table-user">
                <strong>Olivia Rhye</strong>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <div class="table-badges">
              <span class="small-caps">Viva Health UAB</span>
            </div>
          </td>
          <td>
            <div class="btns-group">
              <a href="#" class="inline-link text-gray">Edit</a>
              <a href="#" class="inline-link">Download</a>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <label class="custom-checkbox">
                <input type="checkbox" name="default-checkbox" />
                <span class="custom-checkbox-icon"></span>
              </label>
              <span class="text-semibold">#3066</span>
            </div>
          </td>
          <td>
            Jan 6, 2025
          </td>
          <td>
            <span class="badge badge-red">
              <i class="fa-solid fa-xmark"></i>
              Cancelled
            </span>
          </td>
          <td>
            <div class="d-flex">
              <div class="table-photo">
                <img src="img/users/Avatar3.png" alt="Name">
              </div>
              <div class="table-user">
                <strong>Olivia Rhye</strong>
                <span>olivia@vivahealth.com</span>
              </div>
            </div>
          </td>
          <td>
            <div class="table-badges">
              <span class="small-caps">Viva Medicare</span> <em>Plus</em>
            </div>
          </td>
          <td>
            <div class="btns-group">
              <a href="#" class="inline-link text-gray">Edit</a>
              <a href="#" class="inline-link">Download</a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="table-pagination">
    <div class="pagination pagination-space-between">
      <a href="#" class="btn btn-simple">Prev</a>
      <div class="pagination-mobile">
        <select name="pagination-table-mobile" id="pagination-table-mobile" class="pagination-select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
        <span>of 10 pages</span>
      </div>
      <ul class="pagination-list">
        <li class="pagination-item"><a href="#" class="pagination-link">1</a></li>
        <li class="pagination-item pagination-item-current"><span class="pagination-link">2</span></li>
        <li class="pagination-item"><a href="#" class="pagination-link">3</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">4</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">5</a></li>
        <li class="pagination-item pagination-item-dots">
          <span class="pagination-link"><i class="fa-solid fa-ellipsis"></i></span>
          <ul class="sub-pagination-list">
            <li class="pagination-item"><a href="#" class="pagination-link">6</a></li>
            <li class="pagination-item"><a href="#" class="pagination-link">7</a></li>
            <li class="pagination-item"><a href="#" class="pagination-link">8</a></li>
          </ul>
        </li>
        <li class="pagination-item"><a href="#" class="pagination-link">9</a></li>
      </ul>
      <a href="#" class="btn btn-simple">Next</a>
    </div>
  </div>
</div>


Files table


Files Uploaded

File size Date uploaded Last updated Uploaded by
Provider Manual.pdf 200 KB
200 KB Jan 4, 2025 Jan 4, 2025 Olivia Rhye
Dashboard screenshot.jpg 200 KB
200 KB Jan 4, 2025 Jan 4, 2025 Olivia Rhye
Explanation of Benefits.mp4 200 KB
200 KB Jan 4, 2025 Jan 4, 2025 Olivia Rhye
Dashboard prototype FINAL.fig 200 KB
200 KB Jan 4, 2025 Jan 4, 2025 Olivia Rhye
Provider Guidelines.docx 200 KB
200 KB Jan 4, 2025 Jan 4, 2025 Olivia Rhye

HTML
<div class="table-wrap">
  <div class="table-filters-bar">
    <h4 class="table-headline">Files Uploaded</h4>

    <div class="btns-group">
      <a href="#" class="btn btn-secondary">Download</a>
      <a href="#" class="btn btn-primary">Attach Files</a>
    </div>
  </div>
  
  <div class="table-overflow">
    <table class="table table-files">
      <thead>
        <tr>
          <th>
            <button class="table-sort">
              File Name
            </button>
          </th>
          <th>
            File size
          </th>
          <th>
            Date uploaded
          </th>
          <th>
            Last updated
          </th>
          <th>
            Uploaded by
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex">
              <div class="table-file-icon">
                <i class="fa-solid fa-file-pdf"></i>
              </div>
              <div class="table-user">
                <span class="text-semibold">Provider Manual.pdf</span>
                <span>200 KB</span>
              </div>
            </div>
          </td>
          <td>
            200 KB
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Olivia Rhye
          </td>
          <td>
            <div class="table-drop">
              <span class="table-drop-btn">
                <i class="fa-solid fa-ellipsis-vertical"></i>
              </span>
              <div class="table-drop-content">
                <a href="#">Download</a>
                <a href="#">Save</a>
                <a href="#">Delete</a>
                <a href="#">Share</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <div class="table-file-icon">
                <i class="fa-regular fa-file-image"></i>
              </div>
              <div class="table-user">
                <span class="text-semibold">Dashboard screenshot.jpg</span>
                <span>200 KB</span>
              </div>
            </div>
          </td>
          <td>
            200 KB
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Olivia Rhye
          </td>
          <td>
            <div class="table-drop">
              <span class="table-drop-btn">
                <i class="fa-solid fa-ellipsis-vertical"></i>
              </span>
              <div class="table-drop-content">
                <a href="#">Download</a>
                <a href="#">Save</a>
                <a href="#">Delete</a>
                <a href="#">Share</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <div class="table-file-icon">
                <i class="fa-regular fa-file-mp4"></i>
              </div>
              <div class="table-user">
                <span class="text-semibold">Explanation of Benefits.mp4</span>
                <span>200 KB</span>
              </div>
            </div>
          </td>
          <td>
            200 KB
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Olivia Rhye
          </td>
          <td>
            <div class="table-drop">
              <span class="table-drop-btn">
                <i class="fa-solid fa-ellipsis-vertical"></i>
              </span>
              <div class="table-drop-content">
                <a href="#">Download</a>
                <a href="#">Save</a>
                <a href="#">Delete</a>
                <a href="#">Share</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <div class="table-file-icon">
                <i class="fa-regular fa-file"></i>
              </div>
              <div class="table-user">
                <span class="text-semibold">Dashboard prototype FINAL.fig</span>
                <span>200 KB</span>
              </div>
            </div>
          </td>
          <td>
            200 KB
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Olivia Rhye
          </td>
          <td>
            <div class="table-drop">
              <span class="table-drop-btn">
                <i class="fa-solid fa-ellipsis-vertical"></i>
              </span>
              <div class="table-drop-content">
                <a href="#">Download</a>
                <a href="#">Save</a>
                <a href="#">Delete</a>
                <a href="#">Share</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <div class="table-file-icon">
                <i class="fa-regular fa-file-doc"></i>
              </div>
              <div class="table-user">
                <span class="text-semibold">Provider Guidelines.docx</span>
                <span>200 KB</span>
              </div>
            </div>
          </td>
          <td>
            200 KB
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Olivia Rhye
          </td>
          <td>
            <div class="table-drop">
              <span class="table-drop-btn">
                <i class="fa-solid fa-ellipsis-vertical"></i>
              </span>
              <div class="table-drop-content">
                <a href="#">Download</a>
                <a href="#">Save</a>
                <a href="#">Delete</a>
                <a href="#">Share</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


Files table striped


Files Uploaded

File size Date uploaded Last updated Uploaded by
Provider Manual.pdf 200 KB
200 KB Jan 4, 2025 Jan 4, 2025 Olivia Rhye
Dashboard screenshot.jpg 200 KB
200 KB Jan 4, 2025 Jan 4, 2025 Olivia Rhye
Explanation of Benefits.mp4 200 KB
200 KB Jan 4, 2025 Jan 4, 2025 Olivia Rhye
Dashboard prototype FINAL.fig 200 KB
200 KB Jan 4, 2025 Jan 4, 2025 Olivia Rhye
Provider Guidelines.docx 200 KB
200 KB Jan 4, 2025 Jan 4, 2025 Olivia Rhye

HTML
<div class="table-wrap">
  <div class="table-filters-bar">
    <div>
      <h4 class="table-headline">Files Uploaded</h4>
    </div>

    <div class="btns-group">
      <a href="#" class="btn btn-secondary">Download</a>
      <a href="#" class="btn btn-primary">Attach Files</a>
    </div>
  </div>

  <div class="table-overflow">
    <table class="table table-files table-striped">
      <thead>
        <tr>
          <th>
            <button class="table-sort">
              File Name
            </button>
          </th>
          <th>
            File size
          </th>
          <th>
            Date uploaded
          </th>
          <th>
            Last updated
          </th>
          <th>
            Uploaded by
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex">
              <div class="table-file-icon">
                <i class="fa-solid fa-file-pdf"></i>
              </div>
              <div class="table-user">
                <span class="text-semibold">Provider Manual.pdf</span>
                <span>200 KB</span>
              </div>
            </div>
          </td>
          <td>
            200 KB
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Olivia Rhye
          </td>
          <td>
            <div class="table-drop">
              <span class="table-drop-btn">
                <i class="fa-solid fa-ellipsis-vertical"></i>
              </span>
              <div class="table-drop-content">
                <a href="#">Download</a>
                <a href="#">Save</a>
                <a href="#">Delete</a>
                <a href="#">Share</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <div class="table-file-icon">
                <i class="fa-regular fa-file-image"></i>
              </div>
              <div class="table-user">
                <span class="text-semibold">Dashboard screenshot.jpg</span>
                <span>200 KB</span>
              </div>
            </div>
          </td>
          <td>
            200 KB
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Olivia Rhye
          </td>
          <td>
            <div class="table-drop">
              <span class="table-drop-btn">
                <i class="fa-solid fa-ellipsis-vertical"></i>
              </span>
              <div class="table-drop-content">
                <a href="#">Download</a>
                <a href="#">Save</a>
                <a href="#">Delete</a>
                <a href="#">Share</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <div class="table-file-icon">
                <i class="fa-regular fa-file-mp4"></i>
              </div>
              <div class="table-user">
                <span class="text-semibold">Explanation of Benefits.mp4</span>
                <span>200 KB</span>
              </div>
            </div>
          </td>
          <td>
            200 KB
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Olivia Rhye
          </td>
          <td>
            <div class="table-drop">
              <span class="table-drop-btn">
                <i class="fa-solid fa-ellipsis-vertical"></i>
              </span>
              <div class="table-drop-content">
                <a href="#">Download</a>
                <a href="#">Save</a>
                <a href="#">Delete</a>
                <a href="#">Share</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <div class="table-file-icon">
                <i class="fa-regular fa-file"></i>
              </div>
              <div class="table-user">
                <span class="text-semibold">Dashboard prototype FINAL.fig</span>
                <span>200 KB</span>
              </div>
            </div>
          </td>
          <td>
            200 KB
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Olivia Rhye
          </td>
          <td>
            <div class="table-drop">
              <span class="table-drop-btn">
                <i class="fa-solid fa-ellipsis-vertical"></i>
              </span>
              <div class="table-drop-content">
                <a href="#">Download</a>
                <a href="#">Save</a>
                <a href="#">Delete</a>
                <a href="#">Share</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <div class="table-file-icon">
                <i class="fa-regular fa-file-doc"></i>
              </div>
              <div class="table-user">
                <span class="text-semibold">Provider Guidelines.docx</span>
                <span>200 KB</span>
              </div>
            </div>
          </td>
          <td>
            200 KB
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Jan 4, 2025
          </td>
          <td>
            Olivia Rhye
          </td>
          <td>
            <div class="table-drop">
              <span class="table-drop-btn">
                <i class="fa-solid fa-ellipsis-vertical"></i>
              </span>
              <div class="table-drop-content">
                <a href="#">Download</a>
                <a href="#">Save</a>
                <a href="#">Delete</a>
                <a href="#">Share</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>



Cells



User detail


Olivia Rhye olivia@vivahealth.com

<td> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </td>
Olivia Rhye

<td> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td> <div class="table-user"> <span>Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </td>
Olivia Rhye

<td> <div class="table-user"> <span>Olivia Rhye</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-lihght-gray"> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </td>
Olivia Rhye

<td class="td-lihght-gray"> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-lihght-gray"> <div class="table-user"> <span>Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </td>
Olivia Rhye

<td class="td-lihght-gray"> <div class="table-user"> <span>Olivia Rhye</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-disabled"> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </td>
Olivia Rhye

<td class="td-disabled"> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-disabled"> <div class="table-user"> <span>Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </td>
Olivia Rhye

<td class="td-disabled"> <div class="table-user"> <span>Olivia Rhye</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-light-grass"> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </td>
Olivia Rhye

<td class="td-light-grass"> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-light-grass"> <div class="table-user"> <span>Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </td>
Olivia Rhye

<td class="td-light-grass"> <div class="table-user"> <span>Olivia Rhye</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-med-grass"> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </td>
Olivia Rhye

<td class="td-med-grass"> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-med-grass"> <div class="table-user"> <span>Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </td>
Olivia Rhye

<td class="td-med-grass"> <div class="table-user"> <span>Olivia Rhye</span> </div> </td>


Checkbox + User detail, Badges


Olivia Rhye olivia@vivahealth.com

<td> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
Active

<td> <span class="badge badge-green">Active</span> </td>
Label Label Label + 4

<td> <div class="table-badges"> <span class="badge badge-primary">Label</span> <span class="badge badge-purple">Label</span> <span class="badge badge-blue">Label</span> <span class="badge badge-gray">+ 4</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-lihght-gray"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td class="td-lihght-gray"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
Active

<td class="td-lihght-gray"> <span class="badge badge-green">Active</span> </td>
Label Label Label + 4

<td class="td-lihght-gray"> <div class="table-badges"> <span class="badge badge-primary">Label</span> <span class="badge badge-purple">Label</span> <span class="badge badge-blue">Label</span> <span class="badge badge-gray">+ 4</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-disabled"> <div class="d-flex"> <label class="custom-checkbox disabled"> <input type="checkbox" name="default-checkbox" disabled /> <span class="custom-checkbox-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td class="td-disabled"> <div class="d-flex"> <label class="custom-checkbox disabled"> <input type="checkbox" name="default-checkbox" disabled /> <span class="custom-checkbox-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
Active

<td class="td-disabled"> <span class="badge badge-green">Active</span> </td>
Label Label Label + 4

<td class="td-disabled"> <div class="table-badges"> <span class="badge badge-primary">Label</span> <span class="badge badge-purple">Label</span> <span class="badge badge-blue">Label</span> <span class="badge badge-gray">+ 4</span> </div> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
Active

<td class="td-light-grass"> <span class="badge badge-green">Active</span> </td>
Label Label Label + 4

<td class="td-light-grass"> <div class="table-badges"> <span class="badge badge-primary">Label</span> <span class="badge badge-purple">Label</span> <span class="badge badge-blue">Label</span> <span class="badge badge-gray">+ 4</span> </div> </td>


Radio + User detail, Sum + Badges


Olivia Rhye olivia@vivahealth.com

<td> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
$1,800 20%

<td> <div class="d-flex"> $1,800 <span class="badge badge-green"> <i class="fa-solid fa-arrow-up"></i> 20% </span> </div> </td>
20%

<td> <span class="badge badge-green"> <i class="fa-solid fa-arrow-up"></i> 20% </span> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-lihght-gray"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td class="td-lihght-gray"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
$1,800 20%

<td class="td-lihght-gray"> <div class="d-flex"> $1,800 <span class="badge badge-green"> <i class="fa-solid fa-arrow-up"></i> 20% </span> </div> </td>
20%

<td class="td-lihght-gray"> <span class="badge badge-green"> <i class="fa-solid fa-arrow-up"></i> 20% </span> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-disabled"> <div class="d-flex"> <label class="custom-radio disabled"> <input type="radio" name="default-radio" disabled /> <span class="custom-radio-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td class="td-disabled"> <div class="d-flex"> <label class="custom-radio disabled"> <input type="radio" name="default-radio" disabled /> <span class="custom-radio-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
$1,800 20%

<td class="td-disabled"> <div class="d-flex"> $1,800 <span class="badge badge-green"> <i class="fa-solid fa-arrow-up"></i> 20% </span> </div> </td>
20%

<td class="td-disabled"> <span class="badge badge-green"> <i class="fa-solid fa-arrow-up"></i> 20% </span> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
$1,800 20%

<td class="td-light-grass"> <div class="d-flex"> $1,800 <span class="badge badge-green"> <i class="fa-solid fa-arrow-up"></i> 20% </span> </div> </td>
20%

<td class="td-light-grass"> <span class="badge badge-green"> <i class="fa-solid fa-arrow-up"></i> 20% </span> </td>


Toggle + User detail, Sum + Badges


Olivia Rhye olivia@vivahealth.com

<td> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
$1,800 20%

<td> <div class="d-flex"> $1,800 <span class="badge badge-red"> <i class="fa-solid fa-arrow-down"></i> 20% </span> </div> </td>
20%

<td> <span class="badge badge-red"> <i class="fa-solid fa-arrow-down"></i> 20% </span> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-lihght-gray"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td class="td-lihght-gray"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
$1,800 20%

<td class="td-lihght-gray"> <div class="d-flex"> $1,800 <span class="badge badge-red"> <i class="fa-solid fa-arrow-down"></i> 20% </span> </div> </td>
20%

<td class="td-lihght-gray"> <span class="badge badge-red"> <i class="fa-solid fa-arrow-down"></i> 20% </span> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-disabled"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" disabled /> <span class="toggle-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td class="td-disabled"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" disabled /> <span class="toggle-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
$1,800 20%

<td class="td-disabled"> <div class="d-flex"> $1,800 <span class="badge badge-red"> <i class="fa-solid fa-arrow-down"></i> 20% </span> </div> </td>
20%

<td class="td-disabled"> <span class="badge badge-red"> <i class="fa-solid fa-arrow-down"></i> 20% </span> </td>
Olivia Rhye olivia@vivahealth.com

<td class="td-light-grass"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Olivia Rhye

<td class="td-light-grass"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
$1,800 20%

<td class="td-light-grass"> <div class="d-flex"> $1,800 <span class="badge badge-red"> <i class="fa-solid fa-arrow-down"></i> 20% </span> </div> </td>
20%

<td class="td-light-grass"> <span class="badge badge-red"> <i class="fa-solid fa-arrow-down"></i> 20% </span> </td>


Photo + User detail, Progres bar


Name
Olivia Rhye olivia@vivahealth.com

<td> <div class="d-flex"> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td> <div class="d-flex"> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
60%

<td> <div class="progress-wrap inline"> <div class="progress"> <div class="progress-bar" style="width: 60%;"></div> </div> <div class="progress-value">60%</div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-lihght-gray"> <div class="d-flex"> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-lihght-gray"> <div class="d-flex"> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
60%

<td class="td-lihght-gray"> <div class="progress-wrap inline"> <div class="progress"> <div class="progress-bar" style="width: 60%;"></div> </div> <div class="progress-value">60%</div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-disabled"> <div class="d-flex"> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-disabled"> <div class="d-flex"> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
60%

<td class="td-disabled"> <div class="progress-wrap inline"> <div class="progress"> <div class="progress-bar" style="width: 60%;"></div> </div> <div class="progress-value">60%</div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-light-grass"> <div class="d-flex"> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-light-grass"> <div class="d-flex"> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
60%

<td class="td-light-grass"> <div class="progress-wrap inline"> <div class="progress"> <div class="progress-bar" style="width: 60%;"></div> </div> <div class="progress-value">60%</div> </div> </td>


Checkbox + Photo + User detail, Users


Name
Olivia Rhye olivia@vivahealth.com

<td> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
10 users
Name
Name
Name
Name
Name
+5

<td> <div class="d-flex"> 10 users <div class="table-users"> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar2.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-users-count">+5</div> </div> </div> </div> </td>
Name
Name
Name
Name
Name
+5

<td> <div class="table-users"> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar2.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-users-count">+5</div> </div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-lihght-gray"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-lihght-gray"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
10 users
Name
Name
Name
Name
Name
+5

<td class="td-lihght-gray"> <div class="d-flex"> 10 users <div class="table-users"> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar2.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-users-count">+5</div> </div> </div> </div> </td>
Name
Name
Name
Name
Name
+5

<td class="td-lihght-gray"> <div class="table-users"> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar2.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-users-count">+5</div> </div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-disabled"> <div class="d-flex"> <label class="custom-checkbox disabled"> <input type="checkbox" name="default-checkbox" disabled /> <span class="custom-checkbox-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-disabled"> <div class="d-flex"> <label class="custom-checkbox disabled"> <input type="checkbox" name="default-checkbox" disabled /> <span class="custom-checkbox-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
10 users
Name
Name
Name
Name
Name
+5

<td class="td-disabled"> <div class="d-flex"> 10 users <div class="table-users"> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar2.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-users-count">+5</div> </div> </div> </div> </td>
Name
Name
Name
Name
Name
Name
Name
Name
Name
Name
+5

<td class="td-disabled"> <div class="table-users"> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar2.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar2.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-users-count">+5</div> </div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
10 users
Name
Name
Name
Name
Name
+5

<td class="td-light-grass"> <div class="d-flex"> 10 users <div class="table-users"> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar2.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-users-count">+5</div> </div> </div> </div> </td>
Name
Name
Name
Name
Name
+5

<td class="td-light-grass"> <div class="table-users"> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar2.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-photo"> <img src="img/users/Avatar.png" alt="Name"> </div> </div> <div class="table-users-item"> <div class="table-users-count">+5</div> </div> </div> </td>


Radio + Photo + User detail, Photo small + User detail


Name
Olivia Rhye olivia@vivahealth.com

<td> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td> <div class="d-flex"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span>Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td> <div class="d-flex"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span>Olivia Rhye</span> </div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-lihght-gray"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-lihght-gray"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-lihght-gray"> <div class="d-flex"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span>Olivia Rhye</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-lihght-gray"> <div class="d-flex"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span>Olivia Rhye</span> </div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-disabled"> <div class="d-flex"> <label class="custom-radio disabled"> <input type="radio" name="default-radio" disabled /> <span class="custom-radio-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-disabled"> <div class="d-flex"> <label class="custom-radio disabled"> <input type="radio" name="default-radio" disabled /> <span class="custom-radio-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-disabled"> <div class="d-flex"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span>Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-disabled"> <div class="d-flex"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span>Olivia Rhye</span> </div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-light-grass"> <div class="d-flex"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span>Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-light-grass"> <div class="d-flex"> <div class="table-photo"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span>Olivia Rhye</span> </div> </div> </td>


Toggle + Photo + User detail, Action buttons


Name
Olivia Rhye olivia@vivahealth.com

<td> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>

<td> <div class="btns-group"> <a href="#" class="inline-link text-gray">Delete</a> <a href="#" class="inline-link">Edit</a> </div> </td>

<td> <div class="btns-group center"> <button class="btn btn-icon"><i class="fa-regular fa-copy"></i></button> <button class="btn btn-icon"><i class="fa-regular fa-download"></i></button> <button class="btn btn-icon"><i class="fa-regular fa-trash-can"></i></button> <button class="btn btn-icon"><i class="fa-regular fa-pen"></i></button> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-lihght-gray"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-lihght-gray"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>

<td class="td-lihght-gray"> <div class="btns-group"> <a href="#" class="inline-link text-gray">Delete</a> <a href="#" class="inline-link">Edit</a> </div> </td>

<td class="td-lihght-gray"> <div class="btns-group center"> <button class="btn btn-icon"><i class="fa-regular fa-copy"></i></button> <button class="btn btn-icon"><i class="fa-regular fa-download"></i></button> <button class="btn btn-icon"><i class="fa-regular fa-trash-can"></i></button> <button class="btn btn-icon"><i class="fa-regular fa-pen"></i></button> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-disabled"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" disabled /> <span class="toggle-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-disabled"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" disabled /> <span class="toggle-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>
Delete Edit

<td class="td-disabled"> <div class="btns-group"> <span class="inline-link text-gray">Delete</span> <span class="inline-link">Edit</span> </div> </td>

<td class="td-disabled"> <div class="btns-group center"> <button class="btn btn-icon" disabled><i class="fa-regular fa-copy"></i></button> <button class="btn btn-icon" disabled><i class="fa-regular fa-download"></i></button> <button class="btn btn-icon" disabled><i class="fa-regular fa-trash-can"></i></button> <button class="btn btn-icon" disabled><i class="fa-regular fa-pen"></i></button> </div> </td>
Name
Olivia Rhye olivia@vivahealth.com

<td class="td-light-grass"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> <span>olivia@vivahealth.com</span> </div> </div> </td>
Name
Olivia Rhye

<td class="td-light-grass"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-photo-big"> <img src="img/users/Avatar3.png" alt="Name"> </div> <div class="table-user"> <span class="text-semibold">Olivia Rhye</span> </div> </div> </td>

<td class="td-light-grass"> <div class="btns-group"> <a href="#" class="inline-link text-gray">Delete</a> <a href="#" class="inline-link">Edit</a> </div> </td>

<td class="td-light-grass"> <div class="btns-group center"> <button class="btn btn-icon"><i class="fa-regular fa-copy"></i></button> <button class="btn btn-icon"><i class="fa-regular fa-download"></i></button> <button class="btn btn-icon"><i class="fa-regular fa-trash-can"></i></button> <button class="btn btn-icon"><i class="fa-regular fa-pen"></i></button> </div> </td>


PDF, Checkbox, Radio, Toggle


Provider Manual.pdf 200 KB

<td> <div class="d-flex"> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td> <div class="d-flex"> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>

<td> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> </td>

<td> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> </td>

<td> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> </td>
Provider Manual.pdf 200 KB

<td class="td-light-gray"> <div class="d-flex"> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-light-gray"> <div class="d-flex"> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>

<td class="td-light-gray"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> </td>

<td class="td-light-gray"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> </td>

<td class="td-light-gray"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> </td>
Provider Manual.pdf 200 KB

<td class="td-dissabled"> <div class="d-flex"> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-dissabled"> <div class="d-flex"> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>

<td class="td-dissabled"> <label class="custom-checkbox disabled"> <input type="checkbox" name="default-checkbox" disabled /> <span class="custom-checkbox-icon"></span> </label> </td>

<td class="td-dissabled"> <label class="custom-radio disabled"> <input type="radio" name="default-radio" disabled /> <span class="custom-radio-icon"></span> </label> </td>

<td class="td-dissabled"> <label class="toggle toggle-small"> <input type="checkbox" disabled /> <span class="toggle-icon"></span> </label> </td>
Provider Manual.pdf 200 KB

<td class="td-light-grass"> <div class="d-flex"> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-light-grass"> <div class="d-flex"> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>

<td class="td-light-grass"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" disabled /> <span class="custom-checkbox-icon"></span> </label> </td>

<td class="td-light-grass"> <label class="custom-radio disabled"> <input type="radio" name="default-radio" disabled /> <span class="custom-radio-icon"></span> </label> </td>

<td class="td-light-grass"> <label class="toggle toggle-small"> <input type="checkbox" disabled /> <span class="toggle-icon"></span> </label> </td>


Checkbox + PDF, Dropdown, Rating


Provider Manual.pdf 200 KB

<td> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>

<td> <div class="table-drop"> <span class="table-drop-btn"> <i class="fa-solid fa-ellipsis-vertical"></i> </span> <div class="table-drop-content"> <a href="#" class="inline-link">Copy</a> <a href="#" class="inline-link">Download</a> <a href="#" class="inline-link">Delete</a> <a href="#" class="inline-link">Edit</a> </div> </div> </td>

<td> <div class="rating"> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star rating-star-gray"> <i class="fa-solid fa-star"></i> </span> </div> </td>
Provider Manual.pdf 200 KB

<td class="td-light-gray"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-light-gray"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>

<td class="td-light-gray"> <div class="table-drop"> <span class="table-drop-btn"> <i class="fa-solid fa-ellipsis-vertical"></i> </span> <div class="table-drop-content"> <a href="#" class="inline-link">Copy</a> <a href="#" class="inline-link">Download</a> <a href="#" class="inline-link">Delete</a> <a href="#" class="inline-link">Edit</a> </div> </div> </td>

<td class="td-light-gray"> <div class="rating"> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star rating-star-gray"> <i class="fa-solid fa-star"></i> </span> </div> </td>
Provider Manual.pdf 200 KB

<td class="td-dissabled"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-dissabled"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>

<td class="td-dissabled"> <div class="table-drop"> <span class="table-drop-btn"> <i class="fa-solid fa-ellipsis-vertical"></i> </span> <div class="table-drop-content"> <a href="#" class="inline-link">Copy</a> <a href="#" class="inline-link">Download</a> <a href="#" class="inline-link">Delete</a> <a href="#" class="inline-link">Edit</a> </div> </div> </td>

<td class="td-dissabled"> <div class="rating"> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star rating-star-gray"> <i class="fa-solid fa-star"></i> </span> </div> </td>
Provider Manual.pdf 200 KB

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-checkbox"> <input type="checkbox" name="default-checkbox" /> <span class="custom-checkbox-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>

<td class="td-light-grass"> <div class="table-drop"> <span class="table-drop-btn"> <i class="fa-solid fa-ellipsis-vertical"></i> </span> <div class="table-drop-content"> <a href="#" class="inline-link">Copy</a> <a href="#" class="inline-link">Download</a> <a href="#" class="inline-link">Delete</a> <a href="#" class="inline-link">Edit</a> </div> </div> </td>

<td class="td-light-grass"> <div class="rating"> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star"> <i class="fa-solid fa-star"></i> </span> <span class="rating-star rating-star-gray"> <i class="fa-solid fa-star"></i> </span> </div> </td>


Radio + PDF


Provider Manual.pdf 200 KB

<td> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>
Provider Manual.pdf 200 KB

<td class="td-light-gray"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-light-gray"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>
Provider Manual.pdf 200 KB

<td class="td-dissabled"> <div class="d-flex"> <label class="custom-radio disabled"> <input type="radio" name="default-radio" disabled /> <span class="custom-radio-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-dissabled"> <div class="d-flex"> <label class="custom-radio disabled"> <input type="radio" name="default-radio" disabled /> <span class="custom-radio-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>
Provider Manual.pdf 200 KB

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-light-grass"> <div class="d-flex"> <label class="custom-radio"> <input type="radio" name="default-radio" /> <span class="custom-radio-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>


Toggle + PDF


Provider Manual.pdf 200 KB

<td> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>
Provider Manual.pdf 200 KB

<td class="td-light-gray"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-light-gray"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>
Provider Manual.pdf 200 KB

<td class="td-dissabled"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" disabled /> <span class="toggle-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-dissabled"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" disabled /> <span class="toggle-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>
Provider Manual.pdf 200 KB

<td class="td-light-grass"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> <span>200 KB</span> </div> </div> </td>
Provider Manual.pdf

<td class="td-light-grass"> <div class="d-flex"> <label class="toggle toggle-small"> <input type="checkbox" checked /> <span class="toggle-icon"></span> </label> <div class="table-file-icon"> <i class="fa-solid fa-file-pdf"></i> </div> <div class="table-user"> <span class="text-semibold">Provider Manual.pdf</span> </div> </div> </td>