Usage
Use .card to create a card, with an optional .card-body to create a padded section within a card.
<div class="card" style="max-width: 18rem;">
<div class="card-body">
<h3>
Still stuck?
</h3>
<p>
Our helpful customer service team are here to help.
</p>
<a href="#" class="button button-primary my-4">
Contact us
</a>
</div>
</div>Padding and margin utilities can also be used to control the layout of elements within a card.
Sizing
By default, cards have no fixed width and will fill the full width of their parent element.
Rows, columns, sizing utilities and custom CSS can be used to control their layout if required. The following example demonstrates a simple two-column layout:
<div class="row row-sm">
<div class="sm:col-6">
<div class="card bg-white">
<div class="card-body">
<h3 class="my-4">Card title</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="button button-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="sm:col-6">
<div class="card bg-white">
<div class="card-body">
<h3 class="my-4">Card title</h3>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="button button-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Text alignment
You can quickly change the text alignment of any card and its contents using text align utilities.
<div class="card mb-4 bg-white" style="max-width: 18rem;">
<div class="card-body">
<h3 class="my-4">Card title</h3>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="button button-primary">Go somewhere</a>
</div>
</div>
<div class="card mb-4 text-center mx-auto bg-white" style="max-width: 18rem;">
<div class="card-body">
<h3 class="my-4">Card title</h3>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="button button-primary">Go somewhere</a>
</div>
</div>
<div class="card mb-4 text-right ml-auto bg-white" style="max-width: 18rem;">
<div class="card-body">
<h3 class="my-4">Card title</h3>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="button button-primary">Go somewhere</a>
</div>
</div>Supported content
Cards support a wide variety of content, including images, text, list groups, links, and more.
Images
<div class="card" style="max-width: 18rem;">
<svg>...</svg>
<div class="card-body">
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Use position utilities to overlay your card content on a background image.
<div class="card flex flex-column justify-content-center text-white" style="max-width: 18rem;">
<svg class="block">...</svg>
<div class="card-body p-6 absolute top-0 right-0 bottom-0 left-0">
<h3 class="my-4 text-inherit">
Card title
</h3>
<p>
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>List groups
Create lists of content in a card with a flush list group.
<div class="card bg-white overflow-hidden" style="max-width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Mixed content
Combine multiple content types to create the card you need. The following example includes image styles, blocks, text styles, and a list group:
<div class="card" style="max-width: 18rem;">
<svg class="block">...</svg>
<div class="card-body">
<h3 class="my-4">
Card title
</h3>
<p class="mb-0">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="button button-outline-primary mr-4">Button</a>
<a href="#">Link</a>
</div>
</div>Layout
Using a combination of rows, columns and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
The following example uses .row-flush to remove column gutters and .md:col-* column classes to make the card horizontal at the md breakpoint.
<div class="card" style="max-width: 540px;">
<div class="row row-flush">
<div class="md:col-4">
<svg class="block">...</svg>
</div>
<div class="flex md:col-8">
<div class="card-body align-self-center">
<h3 class="my-4">
Card title
</h3>
<p>
This is a wider card with supporting text below as a natural lead-in to additional content.
</p>
<p>
<small class="text-gray-600">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>Use .column-count-* to display cards in columns.
<div class="column-count-2">
<div class="card inline-block p-4 mb-4">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-gray-600">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card mb-4">
<svg class="block">...</svg>
<div class="card-body">
<h3 class="my-4">Card title</h3>
<p>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><small class="text-gray-600">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<svg class="block">...</svg>
<div class="card-body">
<h3 class="my-4">Card title</h3>
<p>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><small class="text-gray-600">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card inline-block mb-4">
<div class="card-body">
<h3 class="my-4">Card title</h3>
<p>This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p><small class="text-gray-600">Last updated 3 mins ago</small></p>
</div>
</div>
</div>