Basic example
Below is an example of a basic card with mixed content and a fixed width.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card" style="max-width: 20rem;">
<img class="card-img-top" src="../assets/svg/components/placeholder-lg.svg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- End Card -->
Titles, text, and links
Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.
Subtitles are used by adding a .card-subtitle to a <h*> tag.
Card subtitle
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
<!-- Card -->
<div class="card" style="max-width: 20rem;">
<div class="card-body">
<h6 class="card-subtitle">Card subtitle</h6>
<h3 class="card-title">Card title</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="card-link" href="#">Card link</a>
<a class="card-link" href="#">Another link</a>
</div>
</div>
<!-- End Card -->
Add an optional header within a card. By default .card-header is set to display: flex; and justify-content: space-between; and align-items: center;.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-header-title">Featured</h5>
<small class="text-muted">2 days ago</small>
</div>
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!-- End Card -->
Body
The building block of a card is the .card-body. Use it whenever you need a padded section within a card.
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<!-- Card -->
<div class="card">
<div class="card-body">
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</div>
</div>
<!-- End Card -->
Add an optional footer within a card.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<!-- Card -->
<div class="card">
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
2 days ago
</div>
</div>
<!-- End Card -->
Sizing
Use .card-sm class.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card card-sm" style="max-width: 20rem;">
<img class="card-img-top" src="../assets/svg/components/placeholder-lg.svg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- End Card -->
Use .card-lg class.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card card-lg" style="max-width: 20rem;">
<img class="card-img-top" src="../assets/svg/components/placeholder-lg.svg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- End Card -->
Remove border width and padding-bottom from the header.
<!-- Card -->
<div class="card">
<div class="card-header">
<h4 class="card-header-title">Featured</h4>
<a class="btn btn-icon btn-sm btn-ghost-secondary rounded-circle" href="javascript:;">
<i class="tio-more-vertical"></i>
</a>
</div>
<div class="card-body">
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<!-- End Card -->
Body height
Use .card-body-height to add a scrollable fixed content height.
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content.
<!-- Card -->
<div class="card">
<div class="card-body card-body-height">
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<!-- End Card -->
Body centered
Use .card-body-centered to center align the content in a .card-body-height content.
Card title
This content is center aligned.
<!-- Card -->
<div class="card">
<div class="card-body card-body-height">
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/yelling.svg" alt="Image Description">
<h3 class="card-title">Card title</h3>
<p class="card-text">This content is center aligned.</p>
</div>
</div>
<!-- End Card -->
Body stretched
Use .card-body-stretched to align a content in one line.
Starter
$39/mo
8gb/4CPUs
160 GB SSD disk
<div class="row">
<div class="col-sm mb-3 mb-sm-0">
<!-- Card -->
<div class="card h-100 text-center">
<div class="card-body">
<small class="card-subtitle mb-0">Starter</small>
<h2 class="display-4">$39/mo</h2>
<p class="mb-0">8gb/4CPUs</p>
<p class="card-text">160 GB SSD disk</p>
</div>
<div class="card-body-stretched">
<a class="btn btn-block btn-primary" href="#">This is a stretched content</a>
</div>
<a class="card-footer font-size-sm" href="#">
<i class="tio-help-outlined mr-1"></i> Terms & conditions apply
</a>
</div>
<!-- End Card -->
</div>
<div class="col-sm">
<!-- Card -->
<div class="card h-100 text-center">
<div class="card-body">
<small class="card-subtitle mb-0">Enterprise</small>
<h2 class="display-4">$49/mo</h2>
</div>
<div class="card-body-stretched">
<a class="btn btn-block btn-primary" href="#">This is a stretched content</a>
</div>
<a class="card-footer font-size-sm" href="#">
<i class="tio-help-outlined mr-1"></i> Terms & conditions apply
</a>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Row -->
Dashed
Use .card-dashed and .card-dashed-body to wrap a card component with a dashed border style.
<!-- Card -->
<a class="card card-dashed h-100" href="javascript:;">
<div class="card-body card-body-centered card-dashed-body">
<img class="avatar avatar-xl avatar-4by3 mb-2" src="../assets/svg/illustrations/book.svg" alt="Image Description">
<span class="text-primary text-hover-primary">
<i class="tio-add"></i> Add a new address
</span>
</div>
</a>
<!-- End Card -->
Hover shadow
Use .card-hover-shadow class.
<!-- Card -->
<a class="card card-hover-shadow" href="#">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</a>
<!-- End Card -->
Pinned
Use .card-pinned to pin a component to the top right corner of a card.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card" style="max-width: 20rem;">
<img class="card-img-top" src="../assets/svg/components/placeholder-lg.svg" alt="Card image cap">
<div class="card-pinned">
<a class="btn btn-icon btn-sm btn-ghost-secondary rounded-circle" href="javascript:;">
<i class="tio-more-vertical"></i>
</a>
</div>
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- End Card -->
Border left
Except for the left, each border specifies a transparent border. You can use any text color utilities on the border color.
<!-- Card -->
<a class="card card-border-left mb-3" href="#">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-border-left border-primary" href="#">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</a>
<!-- End Card -->
Alert
Use .card-alert with alert to remove the border-radius and margin-bottom to perfectly sit within a card body.
We need permission from your browser to show notifications.
Request permission
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-header-title">Featured</h5>
<small class="text-muted">2 days ago</small>
</div>
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- End Card -->
Profile
Create beautiful profile cards.
<!-- Card -->
<div class="card h-100" style="max-width: 20rem;">
<!-- Unfold -->
<div class="card-pinned">
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-icon btn-sm btn-ghost-secondary rounded-circle" href="javascript:;"
data-hs-unfold-options='{
"target": "#profileDropdownEg",
"type": "css-animation"
}'>
<i class="tio-more-vertical"></i>
</a>
<div id="profileDropdownEg" class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" href="#">Share connection</a>
<a class="dropdown-item" href="#">Block connection</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="#">Delete</a>
</div>
</div>
</div>
<!-- End Unfold -->
<!-- Body -->
<div class="card-body text-center">
<!-- Avatar -->
<div class="avatar avatar-xl avatar-circle avatar-border-lg avatar-centered mb-3">
<img class="avatar-img" src="../assets/img/160x160/img6.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-status-danger"></span>
</div>
<!-- End Avatar -->
<h3 class="mb-1"><a class="text-dark" href="#">Costa Quinn</a></h3>
<div class="mb-3">
<i class="tio-city mr-1"></i>
<span>Research team</span>
</div>
<!-- Badges -->
<ul class="list-inline list-inline-m-1 mb-0">
<li class="list-inline-item"><a class="badge badge-soft-secondary p-2" href="#">SEO</a></li>
</ul>
<!-- End Badges -->
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer">
<div class="row justify-content-between align-items-center">
<div class="col-auto py-1">
<a class="font-size-sm text-body" href="#">9 connections</a>
</div>
<div class="col-auto py-1">
<!-- Checkbox -->
<div class="custom-control custom-checkbox-switch">
<input type="checkbox" id="connectionsCheckbox6" class="custom-control-input custom-checkbox-switch-input">
<label class="custom-checkbox-switch-label btn-sm" for="connectionsCheckbox6">
<span class="custom-checkbox-switch-default">
<i class="tio-user-add mr-1"></i> Connect
</span>
<span class="custom-checkbox-switch-active">
<i class="tio-done mr-1"></i> Connected
</span>
</label>
</div>
<!-- End Checkbox -->
</div>
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
Project
Create beautiful project cards.
Use .card-progress-wrap to wrap a progress at the top of a card. Whereas .card-progress along with the .progress to set a smaller height to the progress than its default size.
Webdev
Updated 2 hours ago
Members
<!-- Card -->
<div class="card card-hover-shadow text-center h-100" style="max-width: 20rem;">
<div class="card-progress-wrap">
<!-- Progress -->
<div class="progress card-progress">
<div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- End Progress -->
</div>
<!-- Body -->
<div class="card-body">
<div class="row align-items-center text-left mb-4">
<div class="col">
<span class="badge badge-soft-secondary p-2">To do</span>
</div>
<div class="col-auto">
<!-- Unfold -->
<div class="hs-unfold card-unfold">
<a class="js-hs-unfold-invoker btn btn-icon btn-sm btn-ghost-secondary rounded-circle" href="javascript:;"
data-hs-unfold-options='{
"target": "#projectsGridDropdown8",
"type": "css-animation"
}'>
<i class="tio-more-vertical"></i>
</a>
<div id="projectsGridDropdown8" class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" href="#">Rename project </a>
<a class="dropdown-item" href="#">Add to favorites</a>
<a class="dropdown-item" href="#">Archive project</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="#">Delete</a>
</div>
</div>
<!-- End Unfold -->
</div>
</div>
<div class="d-flex justify-content-center mb-2">
<!-- Avatar -->
<img class="avatar avatar-lg" src="../assets/svg/brands/google-webdev.svg" alt="Image Description">
</div>
<div class="mb-4">
<h2 class="mb-1">Webdev</h2>
<span class="font-size-sm">Updated 2 hours ago</span>
</div>
<small class="card-subtitle">Members</small>
<div class="d-flex justify-content-center">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-sm avatar-circle z-index-2">
<a class="avatar" href="#" data-toggle="tooltip" data-placement="top" title="Finch Hoot">
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
</a>
<a class="avatar avatar-soft-dark" href="#" data-toggle="tooltip" data-placement="top" title="Bob Bardly">
<span class="avatar-initials">B</span>
</a>
<a class="avatar" href="#" data-toggle="tooltip" data-placement="top" title="Clarice Boone">
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
</a>
<a class="avatar avatar-soft-dark" href="#" data-toggle="tooltip" data-placement="top" title="Adam Keep">
<span class="avatar-initials">A</span>
</a>
</div>
<!-- End Avatar Group -->
</div>
<a class="stretched-link" href="#"></a>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer">
<!-- Stats -->
<div class="row">
<div class="col">
<span class="h4">19</span>
<span class="d-block font-size-sm">Tasks</span>
</div>
<div class="col column-divider">
<span class="h4">33</span>
<span class="d-block font-size-sm">Completed</span>
</div>
<div class="col column-divider">
<span class="h4">10</span>
<span class="d-block font-size-sm">Days left</span>
</div>
</div>
<!-- End Stats -->
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
Team
Create beautiful team cards with list-group.
Our group promotes and sells products and services by leveraging online marketing tactics
<!-- Card -->
<div class="card h-100">
<!-- Body -->
<div class="card-body pb-0">
<div class="row align-items-center mb-2">
<div class="col-9">
<h4 class="mb-1">
<a href="#">#digitalmarketing</a>
</h4>
</div>
<div class="col-3 text-right">
<!-- Unfold -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-icon btn-sm btn-ghost-secondary rounded-circle" href="javascript:;"
data-hs-unfold-options='{
"target": "#teamsDropdownEg",
"type": "css-animation"
}'>
<i class="tio-more-vertical"></i>
</a>
<div id="teamsDropdownEg" class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" href="#">Rename team</a>
<a class="dropdown-item" href="#">Add to favorites</a>
<a class="dropdown-item" href="#">Archive team</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="#">Delete</a>
</div>
</div>
<!-- End Unfold -->
</div>
</div>
<!-- End Row -->
<p>Our group promotes and sells products and services by leveraging online marketing tactics</p>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer border-0 pt-0">
<div class="list-group list-group-flush list-group-no-gutters">
<!-- List Item -->
<div class="list-group-item">
<div class="row align-items-center">
<div class="col">
<small class="card-subtitle">Industry:</small>
</div>
<div class="col-auto">
<a class="badge badge-soft-primary p-2" href="#">Marketing team</a>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="row align-items-center">
<div class="col">
<small class="card-subtitle">Rated:</small>
</div>
<div class="col-auto">
<!-- Stars -->
<div class="d-flex">
<div class="mr-1"><img src="../assets/svg/components/star.svg" alt="Review rating" width="14"></div>
<div class="mr-1"><img src="../assets/svg/components/star.svg" alt="Review rating" width="14"></div>
<div class="mr-1"><img src="../assets/svg/components/star.svg" alt="Review rating" width="14"></div>
<div class="mr-1"><img src="../assets/svg/components/star.svg" alt="Review rating" width="14"></div>
<div class="mr-1"><img src="../assets/svg/components/star-half.svg" alt="Review rating" width="14"></div>
</div>
<!-- End Stars -->
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="row align-items-center">
<div class="col">
<small class="card-subtitle">Members:</small>
</div>
<div class="col-auto">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-xs avatar-circle">
<span class="avatar" data-toggle="tooltip" data-placement="top" title="Ella Lauda">
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
</span>
<span class="avatar" data-toggle="tooltip" data-placement="top" title="David Harrison">
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</span>
<span class="avatar avatar-soft-dark" data-toggle="tooltip" data-placement="top" title="Antony Taylor">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-soft-info" data-toggle="tooltip" data-placement="top" title="Sara Iwens">
<span class="avatar-initials">S</span>
</span>
<span class="avatar" data-toggle="tooltip" data-placement="top" title="Finch Hoot">
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
</span>
<span class="avatar avatar-light avatar-circle" data-toggle="tooltip" data-placement="top" title="Sam Kart, Amanda Harvey and 1 more">
<span class="avatar-initials">+3</span>
</span>
</div>
<!-- End Avatar Group -->
</div>
</div>
</div>
<!-- End List Item -->
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
Table
.card-table aligns table sizes with card body sizes.
<!-- Card -->
<div class="card">
<div class="card-header">
<h4 class="card-header-title">Users</h4>
</div>
<!-- Table -->
<div class="table-responsive">
<table id="basicDatatable" class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table"
data-hs-datatables-options='{
"order": []
}'>
<thead class="thead-light">
<tr>
<th>Name</th>
<th>Position</th>
<th>Country</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="media align-items-center" href="../user-profile.html">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block h5 text-hover-primary mb-0">Amanda Harvey <i class="tio-verified text-primary" data-toggle="tooltip" data-placement="top" title="Top endorsed"></i></span>
<span class="d-block font-size-sm text-body">amanda@example.com</span>
</div>
</a>
</td>
<td>
<span class="d-block h5 mb-0">Director</span>
<span class="d-block font-size-sm">Human resources</span>
</td>
<td>United Kingdom <span class="text-hide">Code: GB</span></td>
<td>
<span class="legend-indicator bg-success"></span>Active
</td>
</tr>
<tr>
<td>
<a class="media align-items-center" href="../user-profile.html">
<div class="avatar avatar-soft-primary avatar-circle mr-3">
<span class="avatar-initials">A</span>
</div>
<div class="media-body">
<span class="d-block h5 text-hover-primary mb-0">Anne Richard</span>
<span class="d-block font-size-sm text-body">anne@example.com</span>
</div>
</a>
</td>
<td>
<span class="d-block h5 mb-0">Seller</span>
<span class="d-block font-size-sm">Branding products</span>
</td>
<td>United States <span class="text-hide">Code: US</span></td>
<td>
<span class="legend-indicator bg-warning"></span>Pending
</td>
</tr>
<tr>
<td>
<a class="media align-items-center" href="../user-profile.html">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block h5 text-hover-primary mb-0">David Harrison</span>
<span class="d-block font-size-sm text-body">david@example.com</span>
</div>
</a>
</td>
<td>
<span class="d-block h5 mb-0">Unknown</span>
<span class="d-block font-size-sm">Unknown</span>
</td>
<td>United States <span class="text-hide">Code: US</span></td>
<td>
<span class="legend-indicator bg-success"></span>Active
</td>
</tr>
<tr>
<td>
<a class="media align-items-center" href="../user-profile.html">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block h5 text-hover-primary mb-0">Finch Hoot</span>
<span class="d-block font-size-sm text-body">finch@example.com</span>
</div>
</a>
</td>
<td>
<span class="d-block h5 mb-0">Designer</span>
<span class="d-block font-size-sm">IT department</span>
</td>
<td>Argentina <span class="text-hide">Code: AR</span></td>
<td>
<span class="legend-indicator bg-danger"></span>Suspended
</td>
</tr>
<tr>
<td>
<a class="media align-items-center" href="../user-profile.html">
<div class="avatar avatar-soft-dark avatar-circle mr-3">
<span class="avatar-initials">B</span>
</div>
<div class="media-body">
<span class="d-block h5 text-hover-primary mb-0">Bob Dean</span>
<span class="d-block font-size-sm text-body">bob@example.com</span>
</div>
</a>
</td>
<td>
<span class="d-block h5 mb-0">Executive director</span>
<span class="d-block font-size-sm">Marketing</span>
</td>
<td>Austria <span class="text-hide">Code: AT</span></td>
<td>
<span class="legend-indicator bg-success"></span>Active
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->
Fullscreen
Use Front's hs-fullscreen.js plugin to add fullscreen dialog.
This example uses Fullscreen library.
This is a fullscreen card body text.
<!-- Card -->
<div id="cardFullScreenEg" class="card">
<!-- Card -->
<div class="card-header">
<h4 class="card-header-title">Fullscreen card</h4>
<!-- Fullscreen -->
<a class="js-fullscreen-invoker btn btn-icon btn-no-focus btn-ghost-secondary rounded-circle" href="javascript:;"
data-hs-fullscreen-options='{
"targetEl": "#cardFullScreenEg"
}'>
<i class="tio-fullscreen-1-1 hs-fullscreen-icon-default" data-toggle="tooltip" data-placement="top" title="Fullscreen"></i>
<i class="tio-exit-fullscreen-1-1 hs-fullscreen-icon-active" data-toggle="tooltip" data-placement="top" title="Exit fullscreen"></i>
</a>
<!-- End Fullscreen -->
</div>
<!-- End Card -->
<div class="card-body text-center" style="overflow-y: auto;">
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/yelling.svg" alt="Image Description">
<p>This is a fullscreen card body text.</p>
</div>
</div>
<!-- End Card -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-fullscreen/dist/hs-fullscreen.min.js"></script>
<script>
$(document).on('ready', function () {
// initialization of toggle
$('.js-fullscreen-invoker').each(function () {
var fullscreen = new HSFullscreen($(this)).init();
});
});
</script>
Fullscreen methods
| Parameters |
Description |
Default value |
targetEl
|
Element which will be fullscreen |
null
|
preventScrollClassName
|
Disable scroll |
.hs-fullscreen-on
|
toggleClassName
|
Class for target element |
.hs-fullscreen
|
mainContainerSelector
|
Element for preventScrollClassName |
body
|
Loading state
Use Front's hs-loading-state.js plugin to show the loading state in your projects.
This example uses Loading state library.
This is a loading state card body text.
<!-- Card -->
<div id="cardLoadingEg" class="card">
<!-- Card -->
<div class="card-header">
<h4 class="card-header-title">Fullscreen card</h4>
<!-- Fullscreen -->
<a class="js-loading-state-invoker btn btn-icon btn-no-focus btn-ghost-secondary rounded-circle" href="javascript:;"
data-hs-loading-state-options='{
"targetEl": "#cardLoadingEg",
"loaderMode": "with-text",
"loaderExtendedClassNames": "text-dark"
}'>
<i class="tio-refresh" data-toggle="tooltip" data-placement="top" title="Reload"></i>
</a>
<!-- End Fullscreen -->
</div>
<!-- End Card -->
<div class="card-body text-center" style="overflow-y: auto;">
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/yelling.svg" alt="Image Description">
<p>This is a loading state card body text.</p>
</div>
</div>
<!-- End Card -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-loading-state/dist/hs-loading-state.min.js"></script>
<script>
$(document).on('ready', function () {
// initialization of loading state
$('.js-loading-state-invoker').each(function () {
var loadingState = new HSLoadingState($(this)).init();
});
});
</script>
Tabbable example:
This example uses Loading state library.
Tab one
Tab two
<!-- Card -->
<div class="card">
<!-- Card -->
<div class="card-header">
<h4 class="card-header-title">Loading state card with tab</h4>
<!-- Nav -->
<div class="text-center">
<ul class="nav nav-segment nav-sm-down-break" role="tablist">
<li class="nav-item">
<a class="js-loading-state-invoker nav-link active" id="nav-one-eg1-tab" data-toggle="pill" href="#nav-one-eg1" role="tab" aria-controls="nav-one-eg1" aria-selected="true"
data-hs-loading-state-options='{
"targetEl": "#nav-one-eg1"
}'>Tab One</a>
</li>
<li class="nav-item">
<a class="js-loading-state-invoker nav-link" id="nav-two-eg1-tab" data-toggle="pill" href="#nav-two-eg1" role="tab" aria-controls="nav-two-eg1" aria-selected="false"
data-hs-loading-state-options='{
"targetEl": "#nav-two-eg1"
}'>Tab two</a>
</li>
</ul>
</div>
<!-- End Nav -->
</div>
<!-- End Card -->
<div class="card-body text-center" style="overflow-y: auto;">
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade show active" id="nav-one-eg1" role="tabpanel" aria-labelledby="nav-one-eg1-tab">
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/yelling.svg" alt="Image Description">
<p>Tab one</p>
</div>
<div class="tab-pane fade" id="nav-two-eg1" role="tabpanel" aria-labelledby="nav-two-eg1-tab">
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/yelling.svg" alt="Image Description">
<p>Tab two</p>
</div>
</div>
<!-- End Tab Content -->
</div>
</div>
<!-- End Card -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-loading-state/dist/hs-loading-state.min.js"></script>
<script>
$(document).on('ready', function () {
// initialization of loading state
$('.js-loading-state-invoker').each(function () {
var loadingState = new HSLoadingState($(this)).init();
});
});
</script>
Loading state methods
| Parameters |
Description |
Default value |
targetEl
|
Сontainer inside which will be loading |
null
|
targetElStyles
|
Optional styles for target el container |
{ position: '' }
|
eventType
|
Set trigger event
Available options:
|
click
|
loaderMode
|
Available options:
|
simple
|
loaderText
|
Appears a text you enter if set to with-text |
Loading...
|
removeLoaderDelay
|
Delay for hide overlay |
1500
|
loaderContainerClassNames
|
Classes for container |
hs-loader-wrapper
|
loaderContainerExtendedClassNames
|
Optional classes for container |
null
|
loaderClassNames
|
Classes for wrapper on simple mode |
hs-loader
|
loaderExtendedClassNames
|
Optional classes for wrapper on simple mode |
null
|
loaderWithTextClassNames
|
Classes for wrapper on with-text mode |
hs-loader-with-text
|
loaderIconClassNames
|
Classes for loader icon |
.spinner-border .spinner-border-sm .text-primary
|
loaderIconExtendedClassNames
|
Optional classes for loader icon |
null
|
loaderTextClassNames
|
Classes for loader text (with-text mode) |
hs-loader-text
|
loaderTextExtendedClassNames
|
Optional classes for loader text (with-text mode) |
null
|
beforeLoading
|
Callback function |
null
|
afterLoading
|
Callback function |
null
|
Remove element
Use Front's hs-remove-element.js plugin to add delete elements.
This example uses Remove element library.
This is a removable element card text.
You have successfully deleted card!
<!-- Card -->
<div id="removableCardEg" class="card">
<!-- Card -->
<div class="card-header">
<h4 class="card-header-title">Remove element card</h4>
<!-- Remove Element -->
<a class="js-remove-element-invoker btn btn-icon btn-no-focus btn-ghost-secondary rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Remove"
data-hs-remove-element-options='{
"targetEl": "#removableCardEg"
}'>
<i class="tio-clear tio-lg"></i>
</a>
<!-- End Remove Element -->
</div>
<!-- End Card -->
<div class="card-body text-center">
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/yelling.svg" alt="Image Description">
<p>This is a removable element card text.</p>
</div>
</div>
<!-- End Card -->
<!-- Removable Card Toast -->
<div id="removeElementToastsContainer" aria-live="polite" aria-atomic="true" style="position: fixed; top: 1.5rem; right: 1.5rem; z-index: -1; min-height: 200px;">
<div id="afterRemoveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<div class="toast-header">
<span class="font-weight-bold text-dark mr-auto">Message</span>
<small class="text-muted">just now</small>
<button type="button" class="close ml-2" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">
<i class="tio-clear"></i>
</span>
</button>
</div>
<div class="toast-body">
<i class="tio-done mr-1"></i> You have successfully deleted card!
</div>
</div>
</div>
<!-- End Removable Card Toast -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-remove-element/dist/hs-remove-element.min.js"></script>
<script>
$(document).on('ready', function () {
// initialization of delete element
$('.js-remove-element-invoker').each(function () {
var removeElement = new HSRemoveElement($(this), {
beforeDelete: function (el) {
var isConfirmed = confirm('Are you sure to remove this project?');
if (!isConfirmed) return false;
$(el).popover('dispose');
$('#removeElementToastsContainer').css('z-index', 10000);
$('#beforeRemoveToast').toast('show');
},
afterDelete: function () {
$('.tooltip').hide();
setTimeout(function () {
$('#afterRemoveToast').toast('show');
$('#afterRemoveToast').on('hidden.bs.toast', function() {
$('#removeElementToastsContainer').css('z-index', -1);
});
}, 500)
}
}).init();
});
});
</script>
Remove element methods
| Parameters |
Description |
Default value |
targetEl
|
Element which will be deleted |
null
|
beforeDelete
|
Callback function |
null
|
afterDelete
|
Callback function |
null
|
Other classes to note
| Class |
Description |
.card-dropdown-filter-centered |
Used to fix the sizing and positioning of the "Filter" dropdown card in the Users page on smaller devices. |
.card-unfold |
Fixes z-index issue where in card used .stretched-link class.
Example: Cards with "More" button on top right corner of a card in Apps file manager. |
.card-nav-vertical |
Can be used to make sizing smaller and to change flex-direction: row; to column in a card where .nav component is utilized.
Example: "Teams" section in User profile. |
.card-navbar-nav |
Sets width of the card to 100% and adds extra padding-top and padding-bottom spaces.
Example: Left side navigation panel in Account settings. |
