Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Please read the official Bootstrap documentation for a full list of options.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere

Card header Dashkit only

Easily create a card header of a fixed height and populate it with text, buttons, or a navigation.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat dolorem, expedita rem. Quis natus officiis asperiores rem ipsum, dolore cumque voluptatum iste vel alias, recusandae culpa hic pariatur quos. 

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

Card header navigation Dashkit only

Use the default Bootstrap grid and the .nav component to easily add a perfectly aligned navigation inside a card header.

Card title

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

Merge your card into a background with the .card-inactive modifier.

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

Make a card fill the whole available space to fit the height of a neighboring card with a .card-fill modifier.

Traffic Channels

Weekly Sales
$24,500 +3.5%
Orders Placed
763.5
Conversion Rate
84.5%
Avg. Order VaLue
$85.50 
<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

Make a card vertically shrink (with a scrollbar) to match the height of its neighboring card with a .card-adjust modifier.

Recent Activity

View all
Launchday 1.4.0 update email sent

Sent to all 1,851 subscribers over a 24 hour period

2m ago
Launchday 1.4.0 update email sent

Sent to all 1,851 subscribers over a 24 hour period

2m ago
Launchday 1.4.0 update email sent

Sent to all 1,851 subscribers over a 24 hour period

2m ago
Launchday 1.4.0 update email sent

Sent to all 1,851 subscribers over a 24 hour period

2m ago

Popular Content

Export
Page Title Pageviews Pageview % Time/Page
Homepage 97,028 35.5% 2:14
Action Another action Something else here
Blog 7,283 9.7% 1:53
Action Another action Something else here
My Account 5,782 6.7% 2:03
Action Another action Something else here
Why Dashkit? 5,012 5.9% 0:45
Action Another action Something else here
Documentation 2,230 2.4% 6:10
Action Another action Something else here 
<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

Combine the default Bootstrap and Dashkit components to create beautiful large and small profile cards.

Action Another action Something else here
...
...

Ab Hadley

Woprking on the latest API integration.

UX Team Research Team

● Online
Subscribe 
<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="../assets/img/covers/profile-cover-2.jpg" alt="..." class="card-img-top">

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

    <!-- Image -->
    <a href="profile-posts.html" class="avatar avatar-xl card-avatar card-avatar-top">
      <img src="../assets/img/avatars/profiles/avatar-2.jpg" class="avatar-img rounded-circle border border-4 border-card" alt="...">
    </a>

    <!-- Heading -->
    <h2 class="card-title">
      <a href="profile-posts.html">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>
...

Dianna Smiley

You either die Spongebob or you live long enough to...

● Online

Subscribe
Action Another action Something else here 
<div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Avatar -->
        <a href="profile-posts.html" class="avatar avatar-lg">
          <img src="assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
        </a>

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

        <!-- Title -->
        <h4 class="mb-1">
          <a href="profile-posts.html">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

A similar to profile cards team component compiled of the default Bootstrap and Dashkit components.

Action Another action Something else here

Launchday

Launchday is a SaaS website builder with a focus on quality, easy to build product sites.

Updated 2hr ago
... ... ... ...
+7
<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.html" class="card-avatar avatar avatar-lg mx-auto">
      <img src="../assets/img/avatars/teams/team-logo-1.jpg" alt="" class="avatar-img rounded">
    </a>

    <!-- Heading -->
    <h2 class="mb-3">
      <a href="team-overview.html">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.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-2.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-3.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-4.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-5.jpg" 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>
...

Launchday

Launchday is a SaaS website builder with a focus on quality, easy to build product sites.

Updated 2hr ago
... ... ... ...
Action Another action Something else here 
<div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Image -->
        <a href="project-team-overview.html" class="avatar avatar-lg">
          <img src="../assets/img/avatars/teams/team-logo-1.jpg" alt="..." class="avatar-img rounded">
        </a>

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

        <!-- Heading -->
        <h4 class="mb-1">
          <a href="team-overview.html">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.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-2.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-3.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-4.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-5.jpg" 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

Another combination of the default Bootstrap and Dashkit components that scales perfectly to look good on screens of any size.

...

Homepage Redesign

Updated 4hr ago
Action Another action Something else here
29%
... ... ... ... 
<div class="card">

  <!-- Image -->
  <a href="project-overview.html">
    <img src="assets/img/avatars/projects/project-1.jpg" 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.html">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.html" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Ab Hadley">
            <img src="assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Adolfo Hess">
            <img src="assets/img/avatars/profiles/avatar-3.jpg" alt="..." class="avatar-img rounded-circle">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Daniela Dewitt">
            <img src="assets/img/avatars/profiles/avatar-4.jpg" alt="..." class="avatar-img rounded-circle">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Miyah Myles">
            <img src="assets/img/avatars/profiles/avatar-5.jpg" alt="..." class="avatar-img rounded-circle">
          </a>
        </div>

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

</div>
...

Homepage Redesign

29%
... ... ... ...
Action Another action Something else here 
<div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Avatar -->
        <a href="project-overview.html" class="avatar avatar-lg avatar-4by3">
          <img src="assets/img/avatars/projects/project-1.jpg" alt="..." class="avatar-img rounded">
        </a>

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

        <!-- Title -->
        <h4 class="mb-1">
          <a href="project-overview.html">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.html" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Ab Hadley">
            <img src="assets/img/avatars/profiles/avatar-2.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Adolfo Hess">
            <img src="assets/img/avatars/profiles/avatar-3.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Daniela Dewitt">
            <img src="assets/img/avatars/profiles/avatar-4.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-bs-toggle="tooltip" title="" data-original-title="Miyah Myles">
            <img src="assets/img/avatars/profiles/avatar-5.jpg" 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

A .card component variation perfect to create a list of files available for download.

...

Launchday Logo

2.5kb SVG

Uploaded by Dianna Smiley on

Download
Action Another action Something else here 
<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="../assets/img/files/file-1.jpg" 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

Create beautiful statcards with the default .card component and the combination of the Bootstrap components and icons.

Budget
$24,500 +3.5% 
<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

A combination of the .card component, illustrations and margin utilities.

...

We released 2008 new versions of our theme to make the world a better place.

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.

Try it for free 
<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="../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

A .card component variation for a pricing option.

Basic plan
$
19
/ month
  • Unlimited activity
  • Direct messaging
  • Members 10 members
  • Admins No access
Start with Basic 
<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

A .card component variation for a kanban item.

Create the release notes for the new pages so customers are warned.

Jun 9

... 
<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.html" class="avatar avatar-xs" data-bs-toggle="tooltip" title="Ab Hadley">
            <img src="../assets/img/avatars/profiles/avatar-2.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
        </div>

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

  </div>
</div>

Create the release notes for the new pages so customers are warned.

Jun 9
... 
<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.html" class="avatar avatar-xs" data-bs-toggle="tooltip" title="Ab Hadley">
            <img src="../assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle">
          </a>
        </div>

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