Cards
Standard cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src="https://picsum.photos/1000/600" class="card-img-top" alt="...">
<div class="card-body">
<p class="h5 card-title">Card title</p>
<p class="card-text text-secondary">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-theme">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<p class="h5 card-title mb-3">Card title</p>
<img src="https://picsum.photos/1000/600" class="mw-100 rounded mb-2" alt="...">
<p class="card-text text-secondary">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-theme">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<p class="h5 card-title">Card title</p>
<p class="card-text text-secondary">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-theme">Button</a>
</div><img src="https://picsum.photos/1000/600" class="card-img-bottom" alt="...">
</div>
</div>
</div>
Card with Header and Footer
Featured
2 days ago
Featured
2 days ago
Featured
2 days ago
<div class="row align-items-center">
<div class="col-12 col-md-6 col-lg-4">
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<p class="h5 card-title">Special title treatment</p>
<p class="card-text text-secondary">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-theme">Button</a>
</div>
<div class="card-footer text-body-secondary">
2 days ago
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card border text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<p class="h5 card-title">Special title treatment</p>
<p class="card-text text-secondary">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-theme">Button</a>
</div>
<div class="card-footer text-body-secondary">
2 days ago
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card shadow-sm text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<p class="h5 card-title">Special title treatment</p>
<p class="card-text text-secondary">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-theme">Button</a>
</div>
<div class="card-footer text-body-secondary">
2 days ago
</div>
</div>
</div>
</div>
Card with Nav
<div class="row align-items-center">
<div class="col-12 col-md-6">
<div class="card adminuiux-card border text-center">
<div class="card-header border-bottom">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<p class="h5 card-title">Special title treatment</p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-theme">Button</a>
</div>
<div class="card-footer text-body-secondary">
2 days ago
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card adminuiux-card border text-center">
<div class="card-header border-bottom">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<p class="h5 card-title">Special title treatment</p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-theme">Button</a>
</div>
<div class="card-footer text-body-secondary">
2 days ago
</div>
</div>
</div>
</div>
Card Horizontal
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 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
<div class="row align-items-center">
<div class="col-12 col-md-6">
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<div class="h-100 w-100 rounded-start coverimg">
<img src="https://picsum.photos/1000/600" class="img-fluid " alt="...">
</div>
</div>
<div class="col-md-8">
<div class="card-body">
<p class="h5 card-title">Card title</p>
<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-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<p class="h5 card-title">Card title</p>
<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-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="col-md-4">
<div class="h-100 w-100 rounded-end coverimg">
<img src="https://picsum.photos/1000/500" class="img-fluid " alt="...">
</div>
</div>
</div>
</div>
</div>
</div>
Card Colored
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-theme-1 mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<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 href="#" class="btn btn-light">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-theme-accent-1 mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<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 href="#" class="btn btn-outline-light">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-danger text-white mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<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 href="#" class="btn btn-outline-light">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-theme-r-gradient mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<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 href="#" class="btn btn-accent">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-theme-accent-r-gradient mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<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 href="#" class="btn btn-theme">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-theme-l-gradient mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<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 href="#" class="btn btn-theme">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-gradient-4 mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<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 href="#" class="btn btn-theme">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-gradient-8 mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<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 href="#" class="btn btn-theme">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-gradient-1 mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<p class="card-text text-secondary">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-theme">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-success-subtle mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<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 href="#" class="btn btn-success">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-warning-subtle mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<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 href="#" class="btn btn-warning">Button</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card adminuiux-card bg-info-subtle mb-3">
<div class="card-header">
<p class="h5 card-title">Card title</p>
</div>
<div class="card-body">
<p class="card-text text-secondary">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-info">Button</a>
</div>
</div>
</div>
</div>
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button