Autosize 

<textarea class="form-control" data-autosize rows="1" placeholder="Try typing something..."></textarea>

Avatars Dashkit only

Sizing 

<div class="avatar avatar-xxl">
  <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xl">
  <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-lg">
  <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar">
  <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-sm">
  <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xs">
  <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Status Indicator 

<div class="avatar avatar-online">
  <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-offline">
  <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Shape 

<div class="avatar">
  <img src="../../verse/test-images/view/4.png" alt="..." class="avatar-img rounded">
</div>

<div class="avatar">
  <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Ratio 

<div class="avatar avatar-lg avatar-4by3">
  <img src="../../verse/test-images/view/1.png" alt="..." class="avatar-img rounded">
</div>

Initials 

<div class="avatar avatar-xxl">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-xl">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-lg">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-sm">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-xs">
  <span class="avatar-title rounded-circle">CF</span>
</div>

Groups 

<div class="avatar-group">
  <div class="avatar">
    <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <span class="avatar-title rounded-circle">CF</span>
  </div>
</div>

Badges

Subtle Dashkit only 

<span class="badge bg-primary-subtle">Primary</span>
<span class="badge bg-secondary-subtle">Secondary</span>
<span class="badge bg-success-subtle">Success</span>
<span class="badge bg-info-subtle">Info</span>
<span class="badge bg-warning-subtle">Warning</span>
<span class="badge bg-danger-subtle">Danger</span>
<span class="badge bg-light-subtle">Light</span>
<span class="badge bg-dark-subtle">Dark</span>

Buttons

White Dashkit only 

<button class="btn btn-white">
  Button white
</button>

Rounded circle Dashkit only 

<button class="btn btn-sm btn-rounded-circle btn-white">+</button>
<button class="btn btn-rounded-circle btn-white">+</button>
<button class="btn btn-lg btn-rounded-circle btn-white">+</button>

Icon Dashkit only 

<button class="btn btn-white">
  <span class="fe fe-bookmark"></span>
</button>

<button class="btn btn-primary">
  <span class="fe fe-bookmark"></span>
</button>

<button class="btn btn-rounded-circle btn-white">
  <span class="fe fe-star"></span>
</button>

<button class="btn btn-rounded-circle btn-primary">
  <span class="fe fe-star"></span>
</button>

Cards

Card header Dashkit only 

<div class="card">
  <div class="card-header">
    
    <h4 class="card-header-title">
      Card title
    </h4>
    
  </div>
</div>

Card header navigation Dashkit only 

<div class="card">
  <div class="card-header">

    <h4 class="card-header-title me-auto">
      Card title
    </h4>

    <ul class="nav nav-tabs nav-tabs-sm card-header-tabs">
      <li class="nav-item">
        <a href="#!" class="nav-link active">Active</a>
      </li>
      <li class="nav-item">
        <a href="#!" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#!" class="nav-link">Link</a>
      </li>
    </ul>

  </div>
</div>

Inactive Dashkit only 

<div class="card card-inactive">
  <div class="card-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempora architecto, sit a repellat dignissimos consequatur mollitia qui consequuntur recusandae numquam voluptate maiores, non cumque illo laboriosam sint dolores. Nostrum.
  </div>
</div>

Fill Dashkit only 

<div class="card card-fill">
  <div class="card-body">...</div>
</div>

<div class="card card-fill-sm">
  <div class="card-body">...</div>
</div>

<div class="card card-fill-md">
  <div class="card-body">...</div>
</div>

<div class="card card-fill-lg">
  <div class="card-body">...</div>
</div>

<div class="card card-fill-xl">
  <div class="card-body">...</div>
</div>

Adjust Dashkit only 

<div class="card-adust">
  <div class="card">...</div>
</div>

<div class="card-adust-sm">
  <div class="card">...</div>
</div>

<div class="card-adust-md">
  <div class="card">...</div>
</div>

<div class="card-adust-lg">
  <div class="card">...</div>
</div>

<div class="card-adust-xl">
  <div class="card">...</div>
</div>

Profile Dashkit only 

<div class="card">

  <!-- Dropdown -->
  <div class="dropdown card-dropdown">
    <a href="#" class="dropdown-ellipses dropdown-toggle text-white" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <i class="fe fe-more-vertical"></i>
    </a>
    <div class="dropdown-menu dropdown-menu-end">
      <a href="#!" class="dropdown-item">
        Action
      </a>
      <a href="#!" class="dropdown-item">
        Another action
      </a>
      <a href="#!" class="dropdown-item">
        Something else here
      </a>
    </div>
  </div>

  <!-- Image -->
  <img src="../../extensions/assets/img/covers/profile-cover-2.jpg" alt="..." class="card-img-top">

  <!-- Body -->
  <div class="card-body text-center">

    <!-- Image -->
    <a href="profile-posts.php" class="avatar avatar-xl card-avatar card-avatar-top">
      <img src="../../verse/test-images/avatars/Spencer_Reid_detail.png" class="avatar-img rounded-circle border border-4 border-card" alt="...">
    </a>

    <!-- Heading -->
    <h2 class="card-title">
      <a href="profile-posts.php">Ab Hadley</a>
    </h2>

    <!-- Text -->
    <p class="small text-body-secondary mb-3">
      Woprking on the latest API integration.
    </p>

    <!-- Badges -->
    <p class="card-text">
      <span class="badge bg-secondary-subtle">
        UX Team
      </span>
      <span class="badge bg-secondary-subtle">
        Research Team
      </span>
    </p>

  </div>

  <!-- Footer -->
  <div class="card-footer card-footer-boxed">
    <div class="row align-items-center justify-content-between">
      <div class="col-auto">

        <!-- Status -->
        <small>
          <span class="text-success">●</span> Online
        </small>

      </div>
      <div class="col-auto">

        <!-- Link -->
        <a href="#!" class="btn btn-sm btn-primary">
          Subscribe
        </a>

      </div>
    </div>
  </div>

</div>


<div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Avatar -->
        <a href="profile-posts.php" class="avatar avatar-lg">
          <img src="test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
        </a>

      </div>
      <div class="col ms-n2">

        <!-- Title -->
        <h4 class="mb-1">
          <a href="profile-posts.php">Dianna Smiley</a>
        </h4>

        <!-- Text -->
        <p class="small text-body-secondary mb-1">
          You either die Spongebob or you live long enough to...
        </p>

        <!-- Status -->
        <p class="small mb-0">
          <span class="text-success">●</span> Online
        </p>

      </div>
      <div class="col-auto">

        <!-- Button -->
        <a href="#!" class="btn btn-sm btn-primary d-none d-md-inline-block">
          Subscribe
        </a>

      </div>
      <div class="col-auto">

        <!-- Dropdown -->
        <div class="dropdown">
          <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" data-expanded="false">
            <i class="fe fe-more-vertical"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-end">
            <a href="#!" class="dropdown-item">
              Action
            </a>
            <a href="#!" class="dropdown-item">
              Another action
            </a>
            <a href="#!" class="dropdown-item">
              Something else here
            </a>
          </div>
        </div>

      </div>
    </div> <!-- / .row -->
  </div> <!-- / .card-body -->
</div>

Team Dashkit only 

<div class="card">
  <div class="card-body text-center">

    <!-- Dropdown -->
    <div class="dropdown card-dropdown">
      <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fe fe-more-vertical"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-end">
        <a href="#!" class="dropdown-item">
          Action
        </a>
        <a href="#!" class="dropdown-item">
          Another action
        </a>
        <a href="#!" class="dropdown-item">
          Something else here
        </a>
      </div>
    </div>

    <!-- Image -->
    <a href="team-overview.php" class="card-avatar avatar avatar-lg mx-auto">
      <img src="../../verse/test-images/view/0.png" alt="" class="avatar-img rounded">
    </a>

    <!-- Heading -->
    <h2 class="mb-3">
      <a href="team-overview.php">Launchday</a>
    </h2>

    <!-- Text -->
    <p class="card-text text-body-secondary">
      Launchday is a SaaS website builder with a focus on quality, easy to build product sites.
    </p>

  </div>
  <div class="card-footer card-footer-boxed">
    <div class="row align-items-center">
      <div class="col">

        <!-- Text -->
        <small class="text-body-secondary">
          <i class="fe fe-clock"></i> Updated 2hr ago
        </small>

      </div>
      <div class="col-auto">

        <!-- Avatar group -->
        <div class="avatar-group">
          <a href="profile-posts.php" class="avatar avatar-xs">
            <img src="../../verse/test-images/avatars/Spencer_Reid_detail.png" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs">
            <img src="../../verse/test-images/avatars/Luke_Alvez_-_detail.png" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs">
            <img src="../../verse/test-images/avatars/avatar-2.png" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs">
            <img src="../../verse/test-images/avatars/avatar-1.png" class="avatar-img rounded-circle" alt="...">
          </a>
          <div class="avatar avatar-xs">
            <div class="avatar-title rounded-circle">+7</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>


<div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Image -->
        <a href="project-team-overview.php" class="avatar avatar-lg">
          <img src="../../verse/test-images/view/0.png" alt="..." class="avatar-img rounded">
        </a>

      </div>
      <div class="col ms-n2">

        <!-- Heading -->
        <h4 class="mb-1">
          <a href="team-overview.php">Launchday</a>
        </h4>

        <!-- Text -->
        <p class="small text-body-secondary mb-1">
          Launchday is a SaaS website builder with a focus on quality, easy to build product sites.
        </p>

        <!-- Time -->
        <small class="text-body-secondary">
          <i class="fe fe-clock"></i> Updated 2hr ago
        </small>

      </div>
      <div class="col-auto">

        <!-- Avatar group -->
        <div class="avatar-group d-none d-md-inline-flex">
          <a href="profile-posts.php" class="avatar avatar-xs">
            <img src="../../verse/test-images/avatars/Spencer_Reid_detail.png" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs">
            <img src="../../verse/test-images/avatars/Luke_Alvez_-_detail.png" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs">
            <img src="../../verse/test-images/avatars/avatar-2.png" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs">
            <img src="../../verse/test-images/avatars/avatar-1.png" class="avatar-img rounded-circle" alt="...">
          </a>
        </div>

      </div>
      <div class="col-auto">

        <!-- Dropdown -->
        <div class="dropdown">
          <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fe fe-more-vertical"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-end">
            <a href="#!" class="dropdown-item">
              Action
            </a>
            <a href="#!" class="dropdown-item">
              Another action
            </a>
            <a href="#!" class="dropdown-item">
              Something else here
            </a>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Project Dashkit only 

<div class="card">

  <!-- Image -->
  <a href="project-overview.php">
    <img src="test-images/view/1.png" alt="..." class="card-img-top">
  </a>

  <!-- Body -->
  <div class="card-body mt-0">
    <div class="row align-items-center">
      <div class="col">

        <!-- Title -->
        <h4 class="mb-2">
          <a href="project-overview.php">Homepage Redesign</a>
        </h4>

        <!-- Subtitle -->
        <small class="text-body-secondary">
          Updated 4hr ago
        </small>

      </div>
      <div class="col-auto">

        <!-- Dropdown -->
        <div class="dropdown">
          <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fe fe-more-vertical"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-end">
            <a href="#!" class="dropdown-item">
              Action
            </a>
            <a href="#!" class="dropdown-item">
              Another action
            </a>
            <a href="#!" class="dropdown-item">
              Something else here
            </a>
          </div>
        </div>

      </div>
    </div> <!-- / .row -->
  </div>

  <!-- Footer -->
  <div class="card-footer card-footer-boxed">
    <div class="row align-items-center">
      <div class="col">
        <div class="row align-items-center g-0">
          <div class="col-auto">

            <!-- Value -->
            <small class="me-2">29%</small>

          </div>
          <div class="col">

            <!-- Progress -->
            <div class="progress progress-sm">
              <div class="progress-bar" role="progressbar" style="width: 29%" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

          </div>
        </div> <!-- / .row -->
      </div>
      <div class="col-auto">

        <!-- Avatar group -->
        <div class="avatar-group">
          <a href="profile-posts.php" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Ab Hadley">
            <img src="test-images/avatars/Spencer_Reid_detail.png" alt="..." class="avatar-img rounded-circle">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Adolfo Hess">
            <img src="test-images/avatars/Luke_Alvez_-_detail.png" alt="..." class="avatar-img rounded-circle">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Daniela Dewitt">
            <img src="test-images/avatars/avatar-2.png" alt="..." class="avatar-img rounded-circle">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Miyah Myles">
            <img src="test-images/avatars/avatar-1.png" alt="..." class="avatar-img rounded-circle">
          </a>
        </div>

      </div>
    </div> <!-- / .row -->
  </div>

</div>


<div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Avatar -->
        <a href="project-overview.php" class="avatar avatar-lg avatar-4by3">
          <img src="test-images/view/1.png" alt="..." class="avatar-img rounded">
        </a>

      </div>
      <div class="col ms-n2">

        <!-- Title -->
        <h4 class="mb-1">
          <a href="project-overview.php">Homepage Redesign</a>
        </h4>

        <!-- Text -->
        <p class="small text-body-secondary mb-1">
          <time datetime="2018-06-21">Updated 2hr ago</time>
        </p>

        <!-- Progress -->
        <div class="row align-items-center g-0">
          <div class="col-auto">

            <!-- Value -->
            <div class="small me-2">29%</div>

          </div>
          <div class="col">

            <!-- Progress -->
            <div class="progress progress-sm">
              <div class="progress-bar" role="progressbar" style="width: 29%" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

          </div>
        </div> <!-- / .row -->

      </div>
      <div class="col-auto">

        <!-- Avatar group -->
        <div class="avatar-group d-none d-md-inline-flex">
          <a href="profile-posts.php" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Ab Hadley">
            <img src="test-images/avatars/Spencer_Reid_detail.png" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Adolfo Hess">
            <img src="test-images/avatars/Luke_Alvez_-_detail.png" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Daniela Dewitt">
            <img src="test-images/avatars/avatar-2.png" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.php" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Miyah Myles">
            <img src="test-images/avatars/avatar-1.png" class="avatar-img rounded-circle" alt="...">
          </a>
        </div>

      </div>
      <div class="col-auto">

        <!-- Dropdown -->
        <div class="dropdown">
          <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fe fe-more-vertical"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-end">
            <a href="#!" class="dropdown-item">
              Action
            </a>
            <a href="#!" class="dropdown-item">
              Another action
            </a>
            <a href="#!" class="dropdown-item">
              Something else here
            </a>
          </div>
        </div>

      </div>
    </div> <!-- / .row -->
  </div> <!-- / .card-body -->
</div>

Files Dashkit only 

<div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Avatar -->
        <a href="#!" class="avatar avatar-lg">
          <img src="../../verse/test-images/view/14.png" alt="..." class="avatar-img rounded">
        </a>

      </div>
      <div class="col ms-n2">

        <!-- Title -->
        <h4 class="mb-1 name">
          <a href="#!">Launchday Logo</a>
        </h4>

        <!-- Text -->
        <p class="card-text small text-body-secondary mb-1">
          2.5kb SVG
        </p>

        <!-- Time -->
        <p class="card-text small text-body-secondary">
          Uploaded by Dianna Smiley on <time datetime="2018-01-03">Jan 3, 2018</time>
        </p>

      </div>
      <div class="col-auto">

        <!-- Button -->
        <a href="#!" class="btn btn-sm btn-white d-none d-md-inline-block">
          Download
        </a>

      </div>
      <div class="col-auto">

        <!-- Dropdown -->
        <div class="dropdown">
          <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fe fe-more-vertical"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-end">
            <a href="#!" class="dropdown-item">
              Action
            </a>
            <a href="#!" class="dropdown-item">
              Another action
            </a>
            <a href="#!" class="dropdown-item">
              Something else here
            </a>
          </div>
        </div>

      </div>
    </div> <!-- / .row -->
  </div>
</div>

Statcards Dashkit only 

<div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col">

        <!-- Title -->
        <h6 class="text-uppercase text-body-secondary mb-2">
          Budget
        </h6>

        <!-- Heading -->
        <span class="h2 mb-0">
          $24,500
        </span>

        <!-- Badge -->
        <span class="badge bg-success-subtle mt-n1">
          +3.5%
        </span>

      </div>
      <div class="col-auto">

        <!-- Icon -->
        <span class="h2 fe fe-dollar-sign text-body-secondary mb-0"></span>

      </div>
    </div> <!-- / .row -->
  </div>
</div>

Posts Dashkit only 

<div class="card">
  <div class="card-body text-center">
    <div class="row justify-content-center">
      <div class="col-12 col-xl-10">

        <!-- Image -->
        <img src="../../extensions/assets/img/illustrations/happiness.svg" alt="..." class="img-fluid mt-n5 mb-4" style="max-width: 272px;">

        <!-- Title -->
        <h2 class="mb-2">
          We released 2008 new versions of our theme to make the world a better place.
        </h2>

        <!-- Content -->
        <p class="text-body-secondary">
          This is a true story and totally not made up. This is going to be better in the long run but for now this is the way it is.
        </p>

        <!-- Button -->
        <a href="#!" class="btn btn-primary">
          Try it for free
        </a>

      </div>
    </div> <!-- / .row -->
  </div>
</div>

Pricing Dashkit only 

<div class="card">
  <div class="card-body">

    <!-- Title -->
    <h6 class="text-uppercase text-center text-body-secondary my-4">
      Basic plan
    </h6>

    <!-- Price -->
    <div class="row g-0 align-items-center justify-content-center">
      <div class="col-auto">
        <div class="h2 mb-0">$</div>
      </div>
      <div class="col-auto">
        <div class="display-2 mb-0">19</div>
      </div>
    </div> <!-- / .row -->

    <!-- Period -->
    <div class="h6 text-uppercase text-center text-body-secondary mb-5">
      / month
    </div>

    <!-- Features -->
    <div class="mb-3">
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex align-items-center justify-content-between px-0">
          <small>Unlimited activity</small> <i class="fe fe-check-circle text-success"></i>
        </li>
        <li class="list-group-item d-flex align-items-center justify-content-between px-0">
          <small>Direct messaging</small> <i class="fe fe-check-circle text-success"></i>
        </li>
        <li class="list-group-item d-flex align-items-center justify-content-between px-0">
          <small>Members</small> <small>10 members</small>
        </li>
        <li class="list-group-item d-flex align-items-center justify-content-between px-0">
          <small>Admins</small> <small>No access</small>
        </li>
      </ul>
    </div>

    <!-- Button -->
    <a href="#!" class="btn w-100 btn-light">
      Start with Basic
    </a>

  </div>
</div>

Kanban Dashkit only 

<div class="card card-sm mb-0">
  <div class="card-body">

    <!-- Text -->
    <p>
      Create the release notes for the new pages so customers are warned.
    </p>

    <!-- Footer -->
    <div class="row align-items-center">
      <div class="col">

        <!-- Time -->
        <p class="card-text small text-body-secondary">
          <i class="fe fe-clock"></i> Jun 9
        </p>

      </div>
      <div class="col-auto">

        <!-- Avatar group -->
        <div class="avatar-group">
          <a href="profile-posts.php" class="avatar avatar-xs" data-bs-toggle="tooltip" title="Ab Hadley">
            <img src="../../verse/test-images/avatars/Spencer_Reid_detail.png" class="avatar-img rounded-circle" alt="...">
          </a>
        </div>

      </div>
    </div> <!-- / .row -->

  </div>
</div>


<div class="card card-sm mb-0">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-12 col-md">

        <!-- Title -->
        <p class="mb-md-0">
          Create the release notes for the new pages so customers are warned.
        </p>

      </div>
      <div class="col-6 col-md-auto">

        <!-- Date -->
        <span class="small text-body-secondary">
          <i class="fe fe-clock"></i> Jun 9
        </span>

      </div>
      <div class="col-6 col-md-3 col-lg-2 col-xl-1 text-end">

        <!-- Avatar group -->
        <div class="avatar-group">
          <a href="profile-posts.php" class="avatar avatar-xs" data-bs-toggle="tooltip" title="Ab Hadley">
            <img src="../../verse/test-images/avatars/Spencer_Reid_detail.png" alt="..." class="avatar-img rounded-circle">
          </a>
        </div>

      </div>
    </div> <!-- / .row -->
  </div>
</div>

Charts Dashkit only Plugin

Line 

<div class="chart">
  <canvas class="chart-canvas" id="overviewChart"></canvas>
</div>

<script>
  new Chart('overviewChart', {
    type: 'line',
    options: {
      scales: {
        y: {
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }
      }
    },
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'Earned',
        data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25, 40]
      }]
    }
  });
</script>

Bar 

<div class="chart">
  <canvas class="chart-canvas" id="feedChart"></canvas>
</div>

<script>
  new Chart('feedChart', {
    type: 'bar',
    options: {
      scales: {
        y: {
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }
      }
    },
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'Sales',
        data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32]
      }]
    }
  });
</script>

Doughnut 

<div class="chart chart-appended">
  <canvas class="chart-canvas" id="trafficChart" data-toggle="legend" data-target="#trafficChartLegend"></canvas>
</div>

<div class="chart-legend" id="trafficChartLegend"></div>

<script>
  new Chart('trafficChart', {
    type: 'doughnut',
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            afterLabel: function() {
              return '%'
            }
          }
        }
      }
    },
    data: {
      labels: ['Direct', 'Organic', 'Referral'],
      datasets: [{
        data: [60, 25, 15],
        backgroundColor: ['#2C7BE5', '#A6C5F7', '#D2DDEC']
      }]
    }
  });
</script>

Sparkline 

<div class="chart chart-sparkline">
  <canvas class="chart-canvas" id="sparklineChartSocialOne"></canvas>
</div>

<script>
  new Chart(chart, {
    type: 'line',
    options: {
      scales: {
        y: {
          display: false
        },
        x: {
          display: false
        }
      },
      elements: {
        line: {
          borderWidth: 2,
          borderColor: '#D2DDEC'
        },
        point: {
          hoverRadius: 0
        }
      },
      plugins: {
        tooltip: {
          external: function() {
            return false;
          }
        }
      }
    },
    data: {
      labels: new Array(12).fill('Label'),
      datasets: [{
        data: [0, 15, 10, 25, 30, 15, 40, 50, 80, 60, 55, 65]
      }]
    }
  });
</script>

Toggle chart data 

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="cardToggle" data-toggle="chart" data-target="#conversionsChart" data-trigger="change" data-action="add" data-dataset="1">
  <label class="form-check-label" for="cardToggle"></label>
</div>

<div class="chart">
  <canvas id="conversionsChart" class="chart-canvas"></canvas>
</div>

<script>
  new Chart('conversionsChart', {
    type: 'bar',
    options: {
      scales: {
        y: {
          ticks: {
            callback: function(value) {
              return value + '%';
            }
          }
        }
      }
    },
    data: {
      labels: ['Oct 1', 'Oct 2', 'Oct 3', 'Oct 4', 'Oct 5', 'Oct 6', 'Oct 7', 'Oct 8', 'Oct 9', 'Oct 10', 'Oct 11', 'Oct 12'],
      datasets: [{
        label: '2020',
        data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32]
      }, {
        label: '2019',
        data: [15, 10, 20, 12, 7, 0, 8, 16, 18, 16, 10, 22],
        backgroundColor: '#d2ddec',
        hidden: true
      }]
    }
  });
</script>


<ul class="nav nav-tabs nav-tabs-sm card-header-tabs">
  <li class="nav-item" data-toggle="chart" data-target="#salesChart" data-trigger="click" data-action="toggle" data-dataset="0">
    <a class="nav-link active" href="#" data-bs-toggle="tab">
      All
    </a>
  </li>
  <li class="nav-item" data-toggle="chart" data-target="#salesChart" data-trigger="click" data-action="toggle" data-dataset="1">
    <a class="nav-link" href="#" data-bs-toggle="tab">
      Direct
    </a>
  </li>
  <li class="nav-item" data-toggle="chart" data-target="#salesChart" data-trigger="click" data-action="toggle" data-dataset="2">
    <a class="nav-link" href="#" data-bs-toggle="tab">
      Organic
    </a>
  </li>
</ul>

<div class="chart">
  <canvas id="salesChart" class="chart-canvas"></canvas>
</div>

<script>
  new Chart('salesChart', {
    type: 'line',
    options: {
      scales: {
        y: {
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }
      }
    },
    data: {
      labels: ['Oct 1', 'Oct 3', 'Oct 6', 'Oct 9', 'Oct 12', 'Oct 5', 'Oct 18', 'Oct 21', 'Oct 24', 'Oct 27', 'Oct 30'],
      datasets: [{
        label: 'All',
        data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25]
      }, {
        label: 'Direct',
        data: [7, 40, 12, 27, 34, 17, 19, 30, 28, 32, 24],
        hidden: true
      }, {
        label: 'Organic',
        data: [2, 12, 35, 25, 36, 25, 34, 16, 4, 14, 15],
        hidden: true
      }]
    }
  });
</script>

Checklist Dashkit only 

<div class="checklist">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checklistOne">
    <label class="form-check-label">Delete the old mess in functions files.</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checklistTwo">
    <label class="form-check-label">Refactor the core social sharing modules.</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checklistThree">
    <label class="form-check-label">Create the release notes for the new pages so customers get psyched.</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checklistFour">
    <label class="form-check-label">Send Dianna those meeting notes.</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checklistFive">
    <label class="form-check-label">Share the documentation for the new unified API.</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checklistSix" checked>
    <label class="form-check-label">Clean up the Figma file with all of the avatars, buttons, and other
      components.</label>
  </div>
</div>

Forms

Rounded Dashkit only

<input type="text" class="form-control form-control-rounded" placeholder="Form control rounded">

Flush Dashkit only

<input type="text" class="form-control form-control-flush" placeholder="Form control flush">

Auto Dashkit only

<input type="text" class="form-control form-control-flush form-control-auto" placeholder="Form control auto">

Input group merge Dashkit only 

<div class="input-group input-group-merge input-group-reverse mb-3">
  <input class="form-control" placeholder="Input group reverse" type="text" aria-label="Input group reverse" aria-describedby="inputGroupReverse">
  <div class="input-group-text" id="inputGroupReverse">
    <span class="fe fe-eye"></span>
  </div>
</div>

<div class="input-group input-group-merge mb-3">
  <input class="form-control" placeholder="Input group appended" type="text" aria-label="Input group appended" aria-describedby="inputGroup">
  <div class="input-group-text" id="inputGroup">
    <span class="fe fe-lock"></span>
  </div>
</div>

<div class="input-group input-group-merge input-group-reverse mb-3">
  <input class="form-control is-valid" placeholder="Input group reverse" type="text" aria-label="Input group reverse" aria-describedby="inputGroupValid">
  <div class="input-group-text" id="inputGroupValid">
    <span class="fe fe-eye"></span>
  </div>
</div>

<div class="input-group input-group-merge">
  <input class="form-control is-invalid" placeholder="Input group appended" type="text" aria-label="Input group appended" aria-describedby="inputGroupInvalid">
  <div class="input-group-text" id="inputGroupInvalid">
    <span class="fe fe-lock"></span>
  </div>
</div>

Switch 

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

Date picker Dashkit only Plugin 

<input type="text" class="form-control" placeholder="Flatpickr example" data-flatpickr">

<input type="text" class="form-control" placeholder="Flatpickr range example" data-flatpickr='{"mode": "range"}'>

Input masking Dashkit only Plugin 

<input type="text" class="form-control mb-3" placeholder="$0.00" data-inputmask="'alias': 'currency', 'numericInput': 'true', 'prefix': '$'">

<input type="text" class="form-control mb-3" placeholder="(___)___-____" data-inputmask="'mask': '(999)999-9999'">

<input type="text" class="form-control" placeholder="__/__/____" data-inputmask="'mask': '99/99/9999'">

Rich text editor Dashkit only Plugin 

<div data-quill='{"placeholder": "Quill WYSIWYG"}'></div>

Drag and drop Dashkit only Plugin 

<!-- Dropzone -->
<div class="dropzone dropzone-single mb-3" data-dropzone='{"url": "https://", "maxFiles": 1, "acceptedFiles": "image/*"}'>

  <!-- Fallback -->
  <div class="fallback">
    <div class="custom-file">
      <input type="file" class="form-control" id="projectCoverUploads">
      <label class="form-label" for="projectCoverUploads">Choose file</label>
    </div>
  </div>

  <!-- Preview -->
  <div class="dz-preview dz-preview-single">
    <div class="dz-preview-cover">
      <img class="dz-preview-img" src="data:image/svg+xml,%3csvg3c/svg%3e" alt="..." data-dz-thumbnail>
    </div>
  </div>

</div>

<!-- Dropzone -->
<div class="dropzone dropzone-multiple" data-dropzone='{"url": "https://"}'>

  <!-- Fallback -->
  <div class="fallback">
    <div class="custom-file">
      <input type="file" class="form-control" id="customFileUploadMultiple" multiple>
      <label class="form-label" for="customFileUploadMultiple">Choose file</label>
    </div>
  </div>

  <!-- Preview -->
  <ul class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush">
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">

          <!-- Image -->
          <div class="avatar">
            <img class="avatar-img rounded" src="data:image/svg+xml,%3csvg3c/svg%3e" alt="..." data-dz-thumbnail>
          </div>

        </div>
        <div class="col ms-n3">

          <!-- Heading -->
          <h4 class="mb-1" data-dz-name>...</h4>

          <!-- Text -->
          <small class="text-body-secondary" data-dz-size>...</small>

        </div>
        <div class="col-auto">

          <!-- Dropdown -->
          <div class="dropdown">
            <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fe fe-more-vertical"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end">
              <a href="#" class="dropdown-item" data-dz-remove>
                Remove
              </a>
            </div>
          </div>

        </div>
      </div>
    </li>
  </ul>

</div>

Choices Dashkit only Plugin 

<!-- Select -->
<div class="mb-3">
  <select class="form-select" data-choices>
    <option>My first option</option>
    <option>Another option</option>
    <option>Third option is here</option>
  </select>
</div>

<!-- Select -->
<div class="mb-3">
  <select class="form-select" data-choices='{"searchEnabled": false, "choices": [
    {
      "value": "Dianna Smiley",
      "label": "Dianna Smiley",
      "customProperties": {
        "avatarSrc": "../../verse/test-images/avatars/amatsuki.jpg"
      }
    },
    {
      "value": "Ab Hadley",
      "label": "Ab Hadley",
      "customProperties": {
        "avatarSrc": "../../verse/test-images/avatars/Spencer_Reid_detail.png"
      }
    },
    {
      "value": "Adolfo Hess",
      "label": "Adolfo Hess",
      "customProperties": {
        "avatarSrc": "../../verse/test-images/avatars/Luke_Alvez_-_detail.png"
      }
    },
    {
      "value": "Daniela Dewitt",
      "label": "Daniela Dewitt",
      "customProperties": {
        "avatarSrc": "../../verse/test-images/avatars/avatar-2.png"
      }
    }
  ]}'></select>
</div>

<!-- Select -->
<div class="mb-4">
  <select class="form-control" data-choices='{"removeItemButton": true}' multiple>
    <option>CSS</option>
    <option>HTML</option>
    <option>JavaScript</option>
    <option>Bootstrap</option>
  </select>
</div>

<!-- Select -->
<div class="mb-3">
  <select class="form-control form-control-lg" data-choices='{"removeItemButton": true}' multiple>
    <option>CSS</option>
    <option>HTML</option>
    <option>JavaScript</option>
    <option>Bootstrap</option>
  </select>
</div>

<!-- Select -->
<div class="mb-4">
  <select class="form-select form-select-sm" data-choices>
    <option>My first option</option>
    <option>Another option</option>
    <option>Third option is here</option>
  </select>
</div>

<!-- Select -->
<div class="mb-3">
  <select class="form-control is-valid" data-choices='{"removeItemButton": true}' placeholder="Valid input" multiple>
    <option value="">Valid input</option>
    <option>CSS</option>
    <option>HTML</option>
    <option>JavaScript</option>
    <option>Bootstrap</option>
  </select>
</div>

<!-- Select -->
<select class="form-select is-invalid" data-choices>
  <option value="">Invalid input</option>
  <option>My first option</option>
  <option>Another option</option>
  <option>Third option is here</option>
</select>

Icons Dashkit only 

<span class="fe fe-activity"></span>
<span class="fe fe-airplay"></span>
<span class="fe fe-alert-circle"></span>
...

Kanban Dashkit only 

<div class="container-fluid kanban-container">
  <div class="row">
    <div class="col-12">

      <!-- Card -->
      <div class="card">
        <div class="card-body">

          <!-- Category -->
          <div class="kanban-category">
          
            <!-- Item -->
            <div class="kanban-item">...</div>

          </div>
        
        </div>
      </div>
      
    </div>
    <div class="col-12">

      <!-- Card -->
      <div class="card">
        <div class="card-body">

          <!-- Category -->
          <div class="kanban-category">
          
            <!-- Item -->
            <div class="kanban-item">...</div>

          </div>
        
        </div>
      </div>
      
    </div>
  </div> <!-- / .row -->
</div>

Rows Dashkit only 

<div class="list-group list-group-lg list-group-flush">
  <div class="list-group-item">

    <!-- Category -->
    <div class="kanban-category">

      <!-- Card -->
      <div class="kanban-item">...</div>

    </div>

  </div>
  <div class="list-group-item">

    <!-- Category -->
    <div class="kanban-category">

      <!-- Card -->
      <div class="kanban-item">...</div>

    </div>

  </div>
</div>

List group

List group large Dashkit only 

<ul class="list-group list-group-lg">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

List group focus Dashkit only 

<div class="list-group list-group-focus">
  <a class="list-group-item" href="#!">

    <!-- Title -->
    <h4 class="text-body text-focus mb-1">
      Item title
    </h4>

    <!-- Text -->
    <p class="mb-0">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti, eius quae, sint fugit obcaecati reprehenderit reiciendis soluta ab adipisci harum dolore beatae, nihil eaque architecto quas quasi aspernatur natus atque.
    </p>

  </a>
</div>

List.js Dashkit only Plugin 

<div id="list" data-list='{"valueNames": ["name"], "page": 3, "pagination": {"paginationClass": "list-pagination"}}'>

  <!-- Search -->
  <input class="list-search" type="search">

  <!-- List -->
  <ul class="list">
    <li class="name">Casey Fyfe</li>
    <li class="name">Jane Roe</li>
    <li class="name">Casey Fyfe</li>
    <li class="name">Jane Roe</li>
  </ul>

  <!-- Pagination -->
  <ul class="list-pagination"></ul>

</div>

Timeline/activity Dashkit only 

<div class="list-group list-group-flush list-group-activity my-n3">
  <div class="list-group-item">
    <div class="row">
      <div class="col-auto">

        <!-- Avatar -->
        <div class="avatar avatar-sm">
          <div class="avatar-title fs-lg bg-primary-subtle rounded-circle text-primary">
            <i class="fe fe-mail"></i>
          </div>
        </div>

      </div>
      <div class="col ms-n2">

        <!-- Heading -->
        <h5 class="mb-1">
          Launchday 1.4.0 update email sent
        </h5>

        <!-- Text -->
        <p class="small text-gray-700 mb-0">
          Sent to all 1,851 subscribers over a 24 hour period
        </p>

        <!-- Time -->
        <small class="text-body-secondary">
          2m ago
        </small>

      </div>
    </div> <!-- / .row -->
  </div>
</div>


<div class="list-group list-group-flush">
  <div class="list-group-item">
    <div class="row">
      <div class="col-auto">

        <!-- Avatar -->
        <div class="avatar avatar-sm">
          <div class="avatar-title fs-lg bg-primary-subtle rounded-circle text-primary">
            <i class="fe fe-mail"></i>
          </div>
        </div>

      </div>
      <div class="col ms-n2">

        <!-- Heading -->
        <p class="small mb-0">
          <strong>Launchday Update email sent</strong> to 1,851 subscribers over a 24 hour period for maximum open and reply rates.
        </p>

        <!-- Time -->
        <small class="text-body-secondary">
          2m ago
        </small>

      </div>
    </div> <!-- / .row -->
  </div>
</div>

Map Dashkit only 

<div class="ratio ratio-21x9 overflow-hidden rounded">
  <div data-map='{"center": [139.696781, 35.659302], "zoom": 12}'></div>
</div>

Page headers Dashkit only

Basic 

<div class="header">
  <div class="header-body">

    <h6 class="header-pretitle">
      Members
    </h6>
    
    <h1 class="header-title">
      Casey Fyfe
    </h1>

  </div>
</div>

Button 

<div class="header">
  <div class="header-body">
    <div class="row align-items-center">
      <div class="col">

        <h6 class="header-pretitle">
          Members
        </h6>
        
        <h1 class="header-title">
          Casey Fyfe
        </h1>
        
      </div>
      <div class="col-auto">

        <a href="#" class="btn btn-primary">
          Subscribe
        </a>

      </div>
    </div>

  </div>
</div>

Nav 

<div class="header">
  <div class="header-body">
    <div class="row align-items-end">
      <div class="col">

        <h6 class="header-pretitle">
          Members
        </h6>

        <h1 class="header-title">
          Casey Fyfe
        </h1>
        
      </div>
      <div class="col-auto">

        <ul class="nav nav-tabs header-tabs">
          <li class="nav-item">
            <a href="#" class="nav-link text-center active">
              Daily
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Weekly
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Monthly
            </a>
          </li>
        </ul>

      </div>
    </div> 

  </div>
</div>

Button + nav 

<div class="header">
  <div class="header-body">
    <div class="row align-items-end">
      <div class="col">

        <h6 class="header-pretitle">
          Members
        </h6>

        <h1 class="header-title">
          Casey Fyfe
        </h1>
        
      </div>
      <div class="col-auto">
        
        <a href="#" class="btn btn-primary">
          Subscribe
        </a>

      </div>
    </div>
    <div class="row">
      <div class="col-12">

        <ul class="nav nav-tabs header-tabs">
          <li class="nav-item">
            <a href="#" class="nav-link text-center active">
              Daily
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Weekly
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Monthly
            </a>
          </li>
        </ul>
      
      </div>
    </div>
  </div>
</div>

Avatar + nav 

<div class="header">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row align-items-center">
        <div class="col-auto">

          <!-- Avatar -->
          <div class="avatar avatar-lg avatar-4by3">
            <img src="../../verse/test-images/view/1.png" alt="..." class="avatar-img rounded">
          </div>

        </div>
        <div class="col ms-n3 ms-md-n2">

          <!-- Pretitle -->
          <h6 class="header-pretitle">
            Projects
          </h6>

          <!-- Title -->
          <h1 class="header-title">
            Homepage
          </h1>

        </div>
        <div class="col-12 col-md-auto mt-3 mt-md-0">

          <!-- Avatar group -->
          <div class="avatar-group">
            <a href="profile-posts.php" class="avatar">
              <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.php" class="avatar">
              <img src="../../verse/test-images/avatars/Spencer_Reid_detail.png" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.php" class="avatar">
              <img src="../../verse/test-images/avatars/Luke_Alvez_-_detail.png" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.php" class="avatar">
              <img src="../../verse/test-images/avatars/avatar-2.png" alt="..." class="avatar-img rounded-circle">
            </a>
          </div>

          <!-- Button -->
          <a href="#modalMembers" class="btn btn-lg btn-rounded-circle btn-white lift" data-bs-toggle="modal">
            +
          </a>

        </div>
      </div> <!-- / .row -->
      <div class="row align-items-center">
        <div class="col">

          <!-- Nav -->
          <ul class="nav nav-tabs nav-overflow header-tabs">
            <li class="nav-item">
              <a href="project-overview.php" class="nav-link active">
                Overview
              </a>
            </li>
            <li class="nav-item">
              <a href="project-files.php" class="nav-link">
                Files
              </a>
            </li>
            <li class="nav-item">
              <a href="project-reports.php" class="nav-link">
                Reports
              </a>
            </li>
          </ul>

        </div>
      </div>
    </div>
  </div>
</div> <!-- / .header -->

Cover image 

<div class="header">

  <!-- Image -->
  <img src="../../extensions/assets/img/covers/profile-cover-1.jpg" class="header-img-top" alt="...">

  <!-- Body -->
  <div class="container-fluid">
    <div class="header-body mt-n5 mt-md-n6">
      <div class="row align-items-end">
        <div class="col-auto">

          <!-- Avatar -->
          <div class="avatar avatar-xxl header-avatar-top">
            <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle border border-4 border-card">
          </div>

        </div>
        <div class="col mb-3 ms-n3 ms-md-n2">

          <!-- Pretitle -->
          <h6 class="header-pretitle">
            Members
          </h6>

          <!-- Title -->
          <h1 class="header-title">
            Dianna Smiley
          </h1>

        </div>
        <div class="col-12 col-md-auto mt-2 mt-md-0 mb-md-3">

          <!-- Button -->
          <a href="#!" class="btn btn-primary d-block d-md-inline-block">
            Subscribe
          </a>

        </div>
      </div> <!-- / .row -->
      <div class="row align-items-center">
        <div class="col">

          <!-- Nav -->
          <ul class="nav nav-tabs nav-overflow header-tabs">
            <li class="nav-item">
              <a href="profile-posts.php" class="nav-link">
                Posts
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-groups.php" class="nav-link active">
                Groups
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-projects.php" class="nav-link">
                Projects
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-files.php" class="nav-link">
                Files
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-subscribers.php" class="nav-link">
                Subscribers
              </a>
            </li>
          </ul>

        </div>
      </div>
    </div> <!-- / .header-body -->
  </div>
  
</div>

Chart 

<div data-bs-theme="dark">
  <div class="header pb-5">
    <div class="container-fluid">

      <!-- Body -->
      <div class="header-body">
        <div class="row align-items-end">
          <div class="col">

            <!-- Pretitle -->
            <h6 class="header-pretitle">
              Annual
            </h6>

            <!-- Title -->
            <h1 class="header-title">
              Audience
            </h1>

          </div>
          <div class="col-auto">

            <!-- Nav -->
            <ul class="nav nav-tabs header-tabs">
              <li class="nav-item" data-toggle="chart" data-target="#audienceChart" data-trigger="click" data-action="toggle" data-dataset="0">
                <a href="#" class="nav-link text-center active" data-bs-toggle="tab">
                  <h6 class="header-pretitle text-secondary">
                    Users
                  </h6>
                  <h3 class="text-white mb-0">
                    73.2k
                  </h3>
                </a>
              </li>
              <li class="nav-item" data-toggle="chart" data-target="#audienceChart" data-trigger="click" data-action="toggle" data-dataset="1">
                <a href="#" class="nav-link text-center" data-bs-toggle="tab">
                  <h6 class="header-pretitle text-secondary">
                    Sessions
                  </h6>
                  <h3 class="text-white mb-0">
                    92.1k
                  </h3>
                </a>
              </li>
              <li class="nav-item" data-toggle="chart" data-target="#audienceChart" data-trigger="click" data-action="toggle" data-dataset="2">
                <a href="#" class="nav-link text-center" data-bs-toggle="tab">
                  <h6 class="header-pretitle text-secondary">
                    Bounce
                  </h6>
                  <h3 class="text-white mb-0">
                    50.2%
                  </h3>
                </a>
              </li>
            </ul>

          </div>
        </div> <!-- / .row -->
      </div> <!-- / .header-body -->

      <!-- Footer -->
      <div class="header-footer">

        <!-- Chart -->
        <div class="chart">
          <canvas id="audienceChart" class="chart-canvas"></canvas>
        </div>

      </div>

    </div>
  </div> <!-- / .header -->
</div>

Progress

Small Dashkit only 

<div class="progress progress-sm">
  <div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Social posts Dashkit only 

<div class="card">
  <div class="card-body">

    <!-- Header -->
    <div class="mb-3">
      <div class="row align-items-center">
        <div class="col-auto">

          <!-- Avatar -->
          <a href="#!" class="avatar">
            <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
          </a>

        </div>
        <div class="col ms-n2">

          <!-- Title -->
          <h4 class="mb-1">
            Dianna Smiley
          </h4>

          <!-- Time -->
          <p class="card-text small text-body-secondary">
            <span class="fe fe-clock"></span> <time datetime="2018-05-24">4hr ago</time>
          </p>

        </div>
        <div class="col-auto">

          <!-- Dropdown -->
          <div class="dropdown">
            <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fe fe-more-vertical"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end">
              <a href="#!" class="dropdown-item">
                Action
              </a>
              <a href="#!" class="dropdown-item">
                Another action
              </a>
              <a href="#!" class="dropdown-item">
                Something else here
              </a>
            </div>
          </div>

        </div>
      </div> <!-- / .row -->
    </div>

    <!-- Text -->
    <p class="mb-3">
      I've been working on shipping the latest version of Launchday. The story I'm trying to focus on is something like "You're launching soon and need to be 100% focused on your product. Don't lose precious days designing, coding, and testing a product site. Instead, build one in minutes."
    </p>

    <p class="mb-4">
      What do you y'all think? Would love some feedback from <a href="#!" class="badge bg-primary-subtle">@Ab</a> or <a href="#!" class="badge bg-primary-subtle">@Adolfo</a>?
    </p>

    <!-- Image -->
    <p class="text-center mb-3">
      <img src="../../extensions/assets/img/posts/post-1.jpg" alt="..." class="img-fluid rounded">
    </p>

    <!-- Buttons -->
    <div class="mb-3">
      <div class="row">
        <div class="col">

          <a href="#!" class="btn btn-sm btn-white">
            �� 1
          </a>
          <a href="#!" class="btn btn-sm btn-white">
            �� 2
          </a>
          <a href="#!" class="btn btn-sm btn-white">
            Add Reaction
          </a>

        </div>
        <div class="col-auto me-n3">

          <!-- Avatar group -->
          <div class="avatar-group d-none d-sm-flex">
            <a href="profile-posts.php" class="avatar avatar-xs">
              <img src="../../verse/test-images/avatars/Spencer_Reid_detail.png" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.php" class="avatar avatar-xs">
              <img src="../../verse/test-images/avatars/Luke_Alvez_-_detail.png" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.php" class="avatar avatar-xs">
              <img src="../../verse/test-images/avatars/avatar-2.png" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.php" class="avatar avatar-xs">
              <img src="../../verse/test-images/avatars/avatar-1.png" alt="..." class="avatar-img rounded-circle">
            </a>
          </div>

        </div>
        <div class="col-auto">

          <!-- Button -->
          <a href="#!" class="btn btn-sm btn-white">
            Share
          </a>

        </div>
      </div> <!-- / .row -->
    </div>

    <!-- Divider -->
    <hr>

    <!-- Comments -->
    <div class="comment mb-3">
      <div class="row">
        <div class="col-auto">

          <!-- Avatar -->
          <a class="avatar" href="profile-posts.php">
            <img src="../../verse/test-images/avatars/Spencer_Reid_detail.png" alt="..." class="avatar-img rounded-circle">
          </a>

        </div>
        <div class="col ms-n2">

          <!-- Body -->
          <div class="comment-body">

            <div class="row">
              <div class="col">

                <!-- Title -->
                <h5 class="comment-title">
                  Ab Hadley
                </h5>

              </div>
              <div class="col-auto">

                <!-- Time -->
                <time class="comment-time">
                  11:12
                </time>

              </div>
            </div> <!-- / .row -->

            <!-- Text -->
            <p class="comment-text">
              Looking good Dianna! I like the image grid on the left, but it feels like a lot to process and doesn't really <em>show</em> me what the product does? I think using a short looping video or something similar demo'ing the product might be better?
            </p>

          </div>

        </div>
      </div> <!-- / .row -->
    </div>
    <div class="comment mb-3">
      <div class="row">
        <div class="col-auto">

          <!-- Avatar -->
          <a class="avatar" href="profile-posts.php">
            <img src="../../verse/test-images/avatars/Luke_Alvez_-_detail.png" alt="..." class="avatar-img rounded-circle">
          </a>

        </div>
        <div class="col ms-n2">

          <!-- Body -->
          <div class="comment-body">

            <div class="row">
              <div class="col">

                <!-- Title -->
                <h5 class="comment-title">
                  Adolfo Hess
                </h5>

              </div>
              <div class="col-auto">

                <!-- Time -->
                <time class="comment-time">
                  11:12
                </time>

              </div>
            </div> <!-- / .row -->

            <!-- Text -->
            <p class="comment-text">
              Any chance you're going to link the grid up to a public gallery of sites built with Launchday?
            </p>

          </div>

        </div>
      </div> <!-- / .row -->
    </div>

    <!-- Divider -->
    <hr>

    <!-- Form -->
    <div class="row">
      <div class="col-auto">

        <!-- Avatar -->
        <div class="avatar avatar-sm">
          <img src="../../verse/test-images/avatars/amatsuki.jpg" alt="..." class="avatar-img rounded-circle">
        </div>

      </div>
      <div class="col ms-n2">

        <!-- Input -->
        <form class="mt-1">
          <label class="visually-hidden">Leave a comment...</label>
          <textarea class="form-control form-control-flush" data-bs-toggle="autosize" rows="1" placeholder="Leave a comment"></textarea>
        </form>

      </div>
      <div class="col-auto align-self-end">

        <!-- Icons -->
        <div class="text-body-secondary mb-2">
          <a class="text-reset me-3" href="#!" data-bs-toggle="tooltip" title="Add photo">
            <i class="fe fe-camera"></i>
          </a>
          <a class="text-reset me-3" href="#!" data-bs-toggle="tooltip" title="Attach file">
            <i class="fe fe-paperclip"></i>
          </a>
          <a class="text-reset" href="#!" data-bs-toggle="tooltip" title="Record audio">
            <i class="fe fe-mic"></i>
          </a>
        </div>

      </div>
    </div> <!-- / .row -->

  </div>
</div>

Spinners

Card 

<div class="card">
  <div class="card-body text-center">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</div>

Tables

No wrap Dashkit only 

<table class="table table-sm table-nowrap">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Decription</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    </tr>
  </tbody>
</table>

Sorting Dashkit only Plugin 

<div class="table-responsive" data-list='{"valueNames": ["tables-row", "tables-first", "tables-last", "tables-handle"]}'>
  <table class="table table-sm">
    <thead>
      <tr>
        <th scope="col">
          <a href="#" class="text-body-secondary list-sort" data-sort="tables-row">#</a>
        </th>
        <th scope="col">
          <a href="#" class="text-body-secondary list-sort" data-sort="tables-first">First</a>
        </th>
        <th scope="col">
          <a href="#" class="text-body-secondary list-sort" data-sort="tables-last">Last</a>
        </th>
        <th scope="col">
          <a href="#" class="text-body-secondary list-sort" data-sort="tables-handle">Handle</a>
        </th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <th scope="row" class="tables-row">1</th>
        <td class="tables-first">Mark</td>
        <td class="tables-last">Otto</td>
        <td class="tables-handle">@mdo</td>
      </tr>
      <tr>
        <th scope="row" class="tables-row">2</th>
        <td class="tables-first">Jacob</td>
        <td class="tables-last">Thornton</td>
        <td class="tables-handle">@fat</td>
      </tr>
      <tr>
        <th scope="row" class="tables-row">3</th>
        <td class="tables-first">Larry</td>
        <td class="tables-last">the Bird</td>
        <td class="tables-handle">@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Utilities

Backgrounds Dashkit Only 

<div class="bg-fixed-bottom" style="background-image: url(../../extensions/assets/img/illustrations/sticky.svg);">...</div>

<div class="bg-cover" style="background-image: url(...);">...</div>

<nav class="navbar navbar-vertical fixed-start navbar-expand-md navbar-dark bg-vibrant">...</div>
  
<div class="bg-lighter">...</div>

Sizing Dashkit only 

<div class="vw-100 vh-100">...</div>

Borders Dashkit only 

<div class="border border-2 border-white">...</div>

Lift Dashkit only 

<a class="btn btn-white lift">
  Hover to lift
</a>

<a class="btn btn-white lift lift-lg">
  Hover to lift
</a>

Type Dashkit only 

<a class="text-decoration-underline" href="#!">...</a>