Cards
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Base Card - Component Properties
All Card Types .card
Text / Background Color Theme [COLOR_THEME]
Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:
Border Modifier [BORDER_THEME]
Optionally controls card border and color.
Card Modifier [MODIFIER]
Optionally add an overall modifier class to the component.
Card Image Modifier [IMAGE_MODIFIER]
Image classes for cards.
.card-img-top- Base class for any verically oriented card image.
.img-fluid- Base class for any hoizontally oriented card image.
.img-ar1-1- Forces the images to a 1:1 aspect ratio.
.img-ar4-5- Forces the images to a 4:5 aspect ratio.
.img-ar5-4- Forces the images to a 5:4 aspect ratio.
.img-ar5-8- Forces the images to a 5:8 aspect ratio.
.img-ar8-5- Forces the images to a 8:5 aspect ratio.
.img-ar3-2- Forces the images to a 3:2 aspect ratio.
.img-ar16-9- Forces the images to a 16:9 aspect ratio.
Example
<div class="card [COLOR_THEME] [BORDER_THEME] [MODIFIER]">
<img
srcset="xs_image@xs.jpg 480w, md_image@md.jpg 720w,"
sizes="(max-width: 576px) 480px, (max-width: 768px) 720px,"
src="md_image@md.jpg"
alt="..."
class="[IMAGE_MODIFIER]">
<div class="card-body">
...
</div>
</div>
Base Card
Default example: section height is dictated by the content within the content area. The image with display before the conenter for mobile views.
<div class="card">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w,
../../../../assets/img//fpo/fpo-3-2@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
alt="Image description"
class="card-img-top img-ar3-2"
>
</figure>
<div class="card-body">
<h3 class="card-title">Title text</h3>
<p class="card-subtitle">Subtitle text (optional)</p>
<p class="card-text">Card Text Lorem ipsum dolor, sit amet consectetur, adipisicing elit.</p>
<a href="#" class="btn btn-outline-cta btn-sm stretched-link">Card button</a>
</div>
</div>
Image Card
<div class="card dyn-crd-img">
<a href="#" aria-label="Card Label">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w,
../../../../assets/img//fpo/fpo-3-2@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
alt="Image description to show in lightbox"
class="card-img-top img-ar3-2"
>
</figure>
</a>
</div>
Text Card
<div class="card dyn-crd-txt">
<div class="card-body">
<p>Vero nisi voluptatem ut voluptatum molestiae veritatis deserunt?</p>
<p>Error autem ipsum asperiores omnis quidem, nulla quos!</p>
</div>
</div>
<div class="card dyn-crd-txt bg-body-secondary border-0">
<div class="card-body">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</div>
</div>
Title as Link
<div class="card">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w,
../../../../assets/img//fpo/fpo-3-2@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
alt="Card Image"
class="card-img-top img-ar3-2"
>
</figure>
<div class="card-body">
<h4 class="card-title"><a href="#" class="stretched-link">Title with link</a></h4>
</div>
</div>
Horizontal Card
<div class="card crd-hrz mb-3">
<div class="row flex-fill g-0">
<div class="col-cdhz-1">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</figure>
</div>
<div class="col-cdhz-2">
<div class="card-body">
<h3 class="card-title"><a href="#" class="stretched-link">Title with link</a></h3>
<p class="card-subtitle">Subtitle text (optional)</p>
<p class="card-text">Ducimus pariatur minus molestiae mollitia laborum maxime placeat voluptatibus nihil id unde provident dolor, sapiente beatae asperiores quidem rerum accusamus.</p>
<p class="card-text">Laboriosam, impedit perspiciatis quas est modi ullam iure nobis dolore vel sunt.</p>
</div>
</div>
</div>
</div>
<!-- Image Last Example -->
<div class="card crd-hrz">
<div class="row flex-fill g-0">
<div class="col-cdhz-1">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</figure>
</div>
<div class="col-cdhz-2">
<div class="card-body">
<h3 class="card-title">Title Text</h3>
<p class="card-text">Quidem dignissimos a animi unde fugit necessitatibus similique aliquid dolore laudantium facilis tenetur odio accusantium rerum.</p>
<a href="#" class="btn btn-outline-cta btn-sm stretched-link mt-auto">Card button</a>
</div>
</div>
</div>
</div>
Recipe Card Type
<div class="card dyn-crd-rcp">
<div class="recipe-meta">
<span>TagName</span>
<img src="../../../../assets/img/fpo/fpo-1-1@xs.jpg" alt="Image Description">
</div>
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-5-4@xs.jpg 480w,
../../../../assets/img//fpo/fpo-5-4@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-5-4@md.jpg"
alt="Image description"
class="card-img-top img-ar5-4"
>
</figure>
<div class="card-body">
<p class="card-title"><a href="#" class="stretched-link">Recipe Title</a></p>
<p class="card-text">Recipe short description area. Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<p class="card-text recipe-time">
<span class="fa-solid fa-clock" aria-hidden="true"></span>
10 min prep
</p>
</div>
</div>
Product Card
<div class="card dyn-crd-pdt">
<div class="card-badges">
<img src="../../../../assets/img/card-badge-ltf.svg" alt="Limited time flavor" class="img-fluid">
</div>
<figure class="figure">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="figure-img"
>
</figure>
<div class="card-body">
<p class="card-title">Product Title</p>
<span class="star-rating" role='img' aria-label="Rated 3 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
<a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
</div>
</div>
Article Type Card
<div class="card dyn-crd-atv">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="card-img-top img-ar8-5"
>
</figure>
<div class="card-body">
<h3 class="card-title">Article Title</h3>
<p class="card-date">Month 00, 2024</p>
<p class="card-text">Lorem ipsum dolor sit amet consectetur. Sit sed aenean vestibulum ornare.</p>
<a href="#" class="btn btn-outline-accent3 btn-sm stretched-link">Read More</a>
</div>
</div>
Article Type Card Horizontal
<div class="card crd-hrz dyn-crd-ath">
<div class="row flex-fill g-0">
<div class="col-cdhz-1">
<figure class="figure d-md-none">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="img-fluid img-ar8-5"
>
</figure>
<figure class="figure d-none d-md-flex">
<img
srcset="../../../../assets/img//fpo/fpo-4-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-4-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-4-5@md.jpg"
alt="Image description"
class="img-fit img-ar4-5"
>
</figure>
</div>
<div class="col-cdhz-2">
<div class="card-body">
<h3 class="card-title">Article Title</h3>
<p class="card-date">Month 00, 2024</p>
<p class="card-text">Lorem ipsum dolor sit amet consectetur. Sit sed aenean vestibulum ornare.</p>
<a href="#" class="btn btn-outline-accent3 btn-sm stretched-link">Read More</a>
</div>
</div>
</div>
</div>
Event Type Card
<div class="card dyn-crd-etv">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w,
../../../../assets/img//fpo/fpo-16-9@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
alt="Image description"
class="card-img-top img-ar16-9"
>
</figure>
<div class="card-body">
<div class="card-date-title">
<p class="card-date">
<span class="card-date-day">28</span>
<span class="card-date-month">Feb</span>
</p>
<h3 class="card-title">Event Title - Lorem ipsum dolor sit</h3>
</div>
<p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus rerum architecto maxime. Tempore ea voluptatibus qui quos impedit.</p>
<p class="card-text">Event Location <br>Location Address. City, STATE <br>7:00 PM <span class="recurring-event-period">weekly</span></p>
<a href="#" class="btn btn-outline-accent3 btn-sm stretched-link">Purchase Tickets</a>
</div>
</div>
Staff Bio Type Card
<div class="card dyn-crd-sbv">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-5-4@xs.jpg 480w,
../../../../assets/img//fpo/fpo-5-4@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-5-4@md.jpg"
alt="Image description"
class="card-img-top img-ar5-4"
>
</figure>
<div class="card-body">
<h4 class="card-title">FirstName LastName</h4>
<p class="card-text">Staff Title</p>
<div class="crd-sb-social">
<a href="#">
<span class="fa-brands fa-facebook-f" aria-hidden="true"></span><span class="visually-hidden">Facebook</span>
</a>
<a href="#">
<span class="fa-brands fa-x-twitter" aria-hidden="true"></span><span class="visually-hidden">Twitter X</span>
</a>
</div>
</div>
</div>
Staff Bio Type Card Horizontal
<div class="card crd-hrz dyn-crd-sbh">
<div class="row flex-fill g-0">
<div class="col-cdhz-1">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-fluid img-ar1-1"
>
</figure>
</div>
<div class="col-cdhz-2">
<div class="card-body">
<h3 class="card-title"><a href="#">FirstName LastName</a></h3>
<p class="card-text">Staff Title</p>
<div class="crd-sb-social">
<a href="#">
<span class="fa-brands fa-facebook-f" aria-hidden="true"></span><span class="visually-hidden">Facebook</span>
</a>
<a href="#">
<span class="fa-brands fa-x-twitter" aria-hidden="true"></span><span class="visually-hidden">Twitter X</span>
</a>
</div>
</div>
</div>
</div>
</div>