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="..." 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 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">
<span class="card-subtitle">Card subtitle</span>
<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 -->
Header
Featured
2 days agoSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<!-- Card -->
<div class="card">
<div class="card-header">
<h3 class="card-header-title">Featured</h3>
<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 -->
Header content between
Featured
2 days agoWith supporting text below as a natural lead-in to additional content.
<!-- Card -->
<div class="card">
<div class="card-header card-header-content-md-between">
<h3 class="card-header-title">Featured</h3>
<small class="text-muted">2 days ago</small>
</div>
<div class="card-body">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<!-- End 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.
<!-- 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 -->
Footer
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
2 days ago
<!-- 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
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="..." 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 -->
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="..." 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 -->
Images
Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Image caps
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<!-- Card -->
<div class="card mb-3">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<!-- End Card -->
Image overlays
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
Card title
This is a wider 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">
<img class="card-img card-img-top" src="..." alt="Card image cap">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a wider 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">Last updated 3 mins ago</p>
</div>
</div>
<!-- End Card -->
Heads up! Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
Horizontal
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .no-gutters and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.
Card title
This is a wider card with supporting text below as a natural lead-in.
Last updated 3 mins ago
<!-- Card -->
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img class="img-fluid" src="..." alt="Card image cap">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<!-- End Card -->
Card layout
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
Card groups
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
Card title
This is a wider 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 title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider 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>
<div class="card">
<img class="card-img-top" src="..." alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
When using card groups with footers, their content will automatically line up.
Card title
This is a wider 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 title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Card transition
Add animation on hover using .card-transition
<!-- Card -->
<a class="card card-transition" href="#">
<img class="card-img-top" src="..." alt="Image Description">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text text-body">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</a>
<!-- End Card -->
Card ghost
Need a card that has no box-shadow and border colors? Use .card-ghost
Billing address #1
45 Roker TerraceLatheronwheel
KW5 8NW, London
UK
Billing address #2
27 Thornton StHundleby
PE23 0ZJ, Manchester
UK
<div class="row">
<div class="col-md-4">
<!-- Card -->
<div class="card card-bordered h-100">
<div class="card-body">
<h3>Billing address #1</h3>
<address class="text-body">
45 Roker Terrace<br>
Latheronwheel<br>
KW5 8NW, London<br>
UK <img class="avatar avatar-xss avatar-circle me-1" src="../node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
</address>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md-4">
<!-- Card -->
<div class="card card-bordered h-100">
<div class="card-body">
<h3>Billing address #2</h3>
<address class="text-body">
27 Thornton St<br>
Hundleby<br>
PE23 0ZJ, Manchester<br>
UK <img class="avatar avatar-xss avatar-circle me-1" src="../node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
</address>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md-4">
<!-- Card -->
<a class="card card-ghost card-centered h-100" href="#">
<div class="card-body">
<div class="mb-2">
<i class="bi-building fs-2"></i>
</div>
Add a new address
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Card dashed
Use .card-dashed
<!-- Card -->
<div class="card card-dashed shadow-none">
<div class="card-body text-center">
<div class="mb-2">
<i class="bi-building fs-2"></i>
</div>
This is a card with dashed border style
</div>
</div>
<!-- End Card -->
Card pinned
Need to place a component on top of a card image? Use .card-pinned-top-start
Top start aligned
Objects and dimensions
Learn the simplest way to select the object and change dimensions.
<!-- Card -->
<div class="card h-100" style="max-width: 20rem;">
<div class="card-pinned">
<img class="card-img-top" src="..." alt="Image Description">
<span class="card-pinned-top-start">
<span class="badge bg-primary rounded-pill">Top start aligned</span>
</span>
</div>
<div class="card-body">
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
</div>
<div class="card-footer">
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
or .card-pinned-top-end
Top end aligned
Objects and dimensions
Learn the simplest way to select the object and change dimensions.
<!-- Card -->
<div class="card h-100" style="max-width: 20rem;">
<div class="card-pinned">
<img class="card-img-top" src="..." alt="Image Description">
<span class="card-pinned-top-end">
<span class="badge bg-primary rounded-pill">Top end aligned</span>
</span>
</div>
<div class="card-body">
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
</div>
<div class="card-footer">
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
or .card-pinned-bottom-start
Top start aligned
Objects and dimensions
Learn the simplest way to select the object and change dimensions.
<!-- Card -->
<div class="card h-100" style="max-width: 20rem;">
<div class="card-pinned">
<img class="card-img-top" src="..." alt="Image Description">
<span class="card-pinned-bottom-start">
<span class="badge bg-primary rounded-pill">Top start aligned</span>
</span>
</div>
<div class="card-body">
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
</div>
<div class="card-footer">
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
or .card-pinned-bottom-end
Top end aligned
Objects and dimensions
Learn the simplest way to select the object and change dimensions.
<!-- Card -->
<div class="card h-100" style="max-width: 20rem;">
<div class="card-pinned">
<img class="card-img-top" src="..." alt="Image Description">
<span class="card-pinned-bottom-end">
<span class="badge bg-primary rounded-pill">Top end aligned</span>
</span>
</div>
<div class="card-body">
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
</div>
<div class="card-footer">
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
Alert
Use .card-alert with alert to remove the border-radius and margin-bottom to perfectly sit within a card body.
Featured
2 days ago
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">
<h3 class="card-header-title">Featured</h3>
<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 -->
Table
.card-table aligns table sizes with card body sizes.
Users
| Name | Position | Country | Status |
|---|---|---|---|
Amanda Harvey
amanda@example.com
| Director Human resources | United Kingdom | Active |
|
A
Anne Richard
anne@example.com
| Seller Branding products | United States | Pending |
David Harrison
david@example.com
| Unknown Unknown | United States | Active |
Finch Hoot
finch@example.com
| Designer IT department | Argentina | Suspended |
|
B
Bob Dean
bob@example.com
| Executive director Marketing | Austria | Active |
<!-- Card -->
<div class="card">
<div class="card-header">
<h4 class="card-header-title">Users</h4>
</div>
<!-- Table -->
<div class="table-responsive">
<table class="table table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Name</th>
<th>Position</th>
<th>Country</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="d-flex" href="../user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-circle">
<img class="avatar-img" src="..." alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Amanda Harvey <i class="bi-patch-check-fill text-primary" data-bs-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</td>
<td>
<span class="legend-indicator bg-success"></span>Active
</td>
</tr>
<tr>
<td>
<a class="d-flex" href="../user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-primary avatar-circle">
<span class="avatar-initials">A</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit 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</td>
<td>
<span class="legend-indicator bg-warning"></span>Pending
</td>
</tr>
<tr>
<td>
<a class="d-flex" href="../user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-circle">
<img class="avatar-img" src="..." alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit 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</td>
<td>
<span class="legend-indicator bg-success"></span>Active
</td>
</tr>
<tr>
<td>
<a class="d-flex" href="../user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-circle">
<img class="avatar-img" src="..." alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit 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</td>
<td>
<span class="legend-indicator bg-danger"></span>Suspended
</td>
</tr>
<tr>
<td>
<a class="d-flex" href="../user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">B</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit 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</td>
<td>
<span class="legend-indicator bg-success"></span>Active
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->
Centered
Use .card-centered to center align a .card-body content.
<!-- Card -->
<a class="card card-center" href="#" style="height: 15rem;">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text text-body">This is a wider 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 -->
Body height
Use .card-body-height to add a scrollable fixed content height.
<!-- Card -->
<a class="card card-center" href="#">
<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>
</a>
<!-- End Card -->
Cover shadow
Use .card-hover-shadow to add a smooth animation with bolder shadow around a card.
<!-- Card -->
<a class="card card-center" href="#">
<div class="card-body card-hover-shadow">
<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 -->
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.
19
Tasks
33
Completed
10
Days left
<!-- Card -->
<div class="card card-hover-shadow text-center h-100" style="max-width: 25rem;">
<div class="card-progress-wrap">
<!-- Progress -->
<div class="progress card-progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="25" aria-valuemax="100"></div>
</div>
<!-- End Progress -->
</div>
<!-- Body -->
<div class="card-body">
<div class="row align-items-center text-start mb-4">
<div class="col">
<span class="badge bg-soft-secondary text-secondary p-2">To do</span>
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Dropdown -->
<div class="dropdown">
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm card-dropdown-btn rounded-circle" id="projectsGridDropdown8" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi-three-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="projectsGridDropdown8">
<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 Dropdown -->
</div>
<!-- End Col -->
</div>
<div class="d-flex justify-content-center mb-2">
<!-- Avatar -->
<img class="avatar avatar-lg" src="..." alt="Image Description">
</div>
<div class="mb-4">
<h2 class="mb-1">Webdev</h2>
<span class="fs-5">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 card-avatar-group">
<a class="avatar" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Finch Hoot">
<img class="avatar-img" src="..." alt="Image Description">
</a>
<a class="avatar avatar-soft-dark" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Bob Bardly">
<span class="avatar-initials">B</span>
</a>
<a class="avatar" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Clarice Boone">
<img class="avatar-img" src="..." alt="Image Description">
</a>
<a class="avatar avatar-soft-dark" href="#" data-bs-toggle="tooltip" data-bs-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 col-divider">
<div class="col">
<span class="h4">19</span>
<span class="d-block fs-5">Tasks</span>
</div>
<!-- End Col -->
<div class="col">
<span class="h4">33</span>
<span class="d-block fs-5">Completed</span>
</div>
<!-- End Col -->
<div class="col">
<span class="h4">10</span>
<span class="d-block fs-5">Days left</span>
</div>
<!-- End Col -->
</div>
<!-- End Stats -->
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
Profile
Create beautiful profile cards.
<!-- Card -->
<div class="card h-100" style="max-width: 25rem;">
<div class="card-pinned">
<div class="card-pinned-top-end">
<!-- Dropdown -->
<div class="dropdown">
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm rounded-circle" id="connectionsDropdown2" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi-three-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end" aria-labelledby="connectionsDropdown2">
<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>
<!-- End Dropdown -->
</div>
</div>
<!-- Body -->
<div class="card-body text-center">
<!-- Avatar -->
<div class="avatar avatar-xl avatar-circle avatar-centered mb-3">
<img class="avatar-img" src="..." alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-status-success"></span>
</div>
<!-- End Avatar -->
<h3 class="mb-1">
<a class="text-dark" href="#">Isabella Finley</a>
</h3>
<div class="mb-3">
<i class="bi-building me-1"></i>
<span>FrontApp</span>
</div>
<!-- Badges -->
<ul class="list-inline mb-0">
<li class="list-inline-item"><a class="badge bg-soft-secondary text-secondary p-2" href="#">Human resources</a></li>
<li class="list-inline-item"><a class="badge bg-soft-secondary text-secondary p-2" href="#">Support</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="fs-6 text-body" href="#">79 connections</a>
</div>
<!-- End Col -->
<div class="col-auto py-1">
<!-- Form Check -->
<div class="form-check form-check-switch">
<input class="form-check-input" type="checkbox" value="" id="connectionsCheckbox2" checked>
<label class="form-check-label btn-sm" for="connectionsCheckbox2">
<span class="form-check-default">
<i class="bi-person-plus-fill"></i> Connect
</span>
<span class="form-check-active">
<i class="bi-check-lg me-2"></i> Connected
</span>
</label>
</div>
<!-- End Form Check -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</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" style="max-width: 25rem;">
<!-- 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>
<!-- End Col -->
<div class="col-3 text-end">
<!-- Dropdown -->
<div class="dropdowm">
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm rounded-circle" id="teamsDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi-three-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end" aria-labelledby="teamsDropdown1">
<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 Dropdown -->
</div>
<!-- End Col -->
</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">
<span class="card-subtitle">Industry:</span>
</div>
<!-- End Col -->
<div class="col-auto">
<a class="badge bg-soft-primary text-primary p-2" href="#">Marketing team</a>
</div>
<!-- End Col -->
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="row align-items-center">
<div class="col">
<span class="card-subtitle">Rated:</span>
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Stars -->
<div class="d-flex gap-1">
<img src="https://cdn.btekno.id/templates/nue/svg/illustrations/star.svg" alt="Review rating" width="14">
<img src="https://cdn.btekno.id/templates/nue/svg/illustrations/star.svg" alt="Review rating" width="14">
<img src="https://cdn.btekno.id/templates/nue/svg/illustrations/star.svg" alt="Review rating" width="14">
<img src="https://cdn.btekno.id/templates/nue/svg/illustrations/star.svg" alt="Review rating" width="14">
<img src="https://cdn.btekno.id/templates/nue/svg/illustrations/star-half.svg" alt="Review rating" width="14">
</div>
<!-- End Stars -->
</div>
<!-- End Col -->
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="row align-items-center">
<div class="col">
<span class="card-subtitle">Members:</span>
</div>
<!-- End Col -->
<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="..." alt="Image Description">
</span>
<span class="avatar" data-toggle="tooltip" data-placement="top" title="David Harrison">
<img class="avatar-img" src="..." 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="..." 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>
<!-- End Col -->
</div>
</div>
<!-- End List Item -->
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
Fullscreen
Use .card-header-content-between to align items in the corners.
This example uses Fullscreen library.
<!-- Card -->
<div id="cardFullScreenEg" class="card card-centered">
<div class="card-header card-header-content-between">
<h3 class="card-header-title">Fullscreen card</h3>
<a class="js-fullscreen-invoker btn btn-ghost-secondary btn-icon btn-sm btn-no-focus rounded-circle" href="javascript:;"
data-nue-fullscreen-options='{
"targetEl": "#cardFullScreenEg"
}'>
<i class="bi-fullscreen nue-fullscreen-icon-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Fullscreen"></i>
<i class="bi-fullscreen-exit nue-fullscreen-icon-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Exit Fullscreen"></i>
</a>
</div>
<div class="card-body">
<img class="avatar avatar-xxl mb-3" src="https://cdn.btekno.id/templates/nue/svg/illustrations/oc-megaphone.svg" alt="Image Description">
<p>This is a fullscreen card body text.</p>
</div>
</div>
<!-- End Card -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF FULLSCREEN
// =======================================================
new NueFullscreen('.js-fullscreen-invoker')
})()
</script>
Fullscreen methods
| Parameters | Description | Default value |
|---|---|---|
targetEl | Element which will be fullscreen |
null |
preventScrollClassName | Disable scroll |
.nue-fullscreen-on |
toggleClassName | Class for target element |
.nue-fullscreen |
mainContainerSelector | Element for preventScrollClassName |
body |
Loading state
Use Front's nue-loading-state.js plugin to show the loading state in your projects.
This example uses Loading state library.
<!-- Card -->
<div id="cardLoadingEg" class="card card-centered">
<div class="card-header card-header-content-between">
<h3 class="card-header-title">Loading state card</h3>
<a class="js-loading-state-invoker btn btn-ghost-secondary btn-icon btn-sm btn-no-focus rounded-circle" href="javascript:;"
data-nue-loading-state-options='{
"targetEl": "#cardLoadingEg",
"loaderMode": "with-text",
"loaderExtendedClassNames": "text-dark"
}'>
<i class="bi-arrow-clockwise" data-bs-toggle="tooltip" data-bs-placement="top" title="Reload"></i>
</a>
</div>
<div class="card-body">
<img class="avatar avatar-xxl mb-3" src="https://cdn.btekno.id/templates/nue/svg/illustrations/oc-megaphone.svg" alt="Image Description">
<p>This is a fullscreen card body text.</p>
</div>
</div>
<!-- End Card -->
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [..] -->
<script src="https://cdn.btekno.id/templates/nue/vendor/nue-loading-state/dist/nue-loading-state.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF LOADING STATE
// =======================================================
new NueLoadingState('.js-loading-state-invoker')
})()
</script>
Tabbable example:
This example uses Loading state library.
<!-- Card -->
<div class="card card-centered">
<div class="card-header card-header-content-between">
<h3 class="card-header-title">Loading state card</h3>
<!-- Nav -->
<div class="text-center">
<ul class="nav nav-segment" role="tablist">
<li class="nav-item">
<a class="js-loading-state-invoker nav-link active" id="nav-one-eg1-tab" data-bs-toggle="pill" href="#nav-one-eg1" role="tab" aria-controls="nav-one-eg1" aria-selected="true"
data-nue-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-bs-toggle="pill" href="#nav-two-eg1" role="tab" aria-controls="nav-two-eg1" aria-selected="false"
data-nue-loading-state-options='{
"targetEl": "#nav-two-eg1"
}'>Tab two</a>
</li>
</ul>
</div>
<!-- End Nav -->
</div>
<div class="card-body">
<!-- 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="https://cdn.btekno.id/templates/nue/svg/illustrations/oc-megaphone.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="https://cdn.btekno.id/templates/nue/svg/illustrations/oc-megaphone.svg" alt="Image Description">
<p>Tab two</p>
</div>
</div>
<!-- End Tab Content -->
</div>
</div>
<!-- End Card -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF LOADING STATE
// =======================================================
new NueLoadingState('.js-loading-state-invoker')
})()
</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 |
nue-loader-wrapper |
loaderContainerExtendedClassNames | Optional classes for container |
null |
loaderClassNames | Classes for wrapper on simple mode |
nue-loader |
loaderExtendedClassNames | Optional classes for wrapper on simple mode |
null |
loaderWithTextClassNames | Classes for wrapper on with-text mode |
nue-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) |
nue-loader-text |
loaderTextExtendedClassNames | Optional classes for loader text (with-text mode) |
null |
beforeLoading | Callback function |
null |
afterLoading | Callback function |
null |
Remove element
This example uses Remove element library.
<!-- Card -->
<div id="removableCardEg" class="card card-centered">
<div class="card-header card-header-content-between">
<h3 class="card-header-title">Remove element card</h3>
<a class="js-remove-element-invoker btn btn-ghost-secondary btn-icon btn-sm btn-no-focus rounded-circle" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove"
data-nue-remove-element-options='{
"targetEl": "#removableCardEg"
}'>
<i class="bi-x-lg"></i>
</a>
</div>
<div class="card-body">
<img class="avatar avatar-xxl mb-3" src="https://cdn.btekno.id/templates/nue/svg/illustrations/oc-megaphone.svg" alt="Image Description">
<p>This is a remove element card body text.</p>
</div>
</div>
<!-- End Card -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF REMOVE ELEMENT
// =======================================================
document.querySelectorAll('.js-remove-element-invoker').forEach(item => {
new NueRemoveElement(item).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-avatar-group | Fixes z-index issue where in card used a .stretched-link class.Example: Cards with three dots icon on top right corner of a card in User Profile Projects. |
.card-dropdown-btn | Fixes z-index issue where in card used a .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. |