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.
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-primary 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 text-bg-accent1 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">
<h4 class="card-title"><a href="#" class="stretched-link">Title with link</a></h4>
<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">
<h4 class="card-title">Title Text</h4>
<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-primary stretched-link">Card button</a>
</div>
</div>
</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">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
<a href="#" class="btn btn-outline-primary 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">
<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 d-md-none"
>
</figure>
<figure class="figure">
<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-fluid img-ar4-5 d-none d-md-block"
>
</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">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
<a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
</div>
</div>
</div>
</div>
Packages & Specials Type Card
<div class="card dyn-crd-psv">
<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">Unde maxime velit quia officia mollitia</h3>
<p class="card-text">Earum ullam voluptatum, in quas necessitatibus sed laudantium excepturi deserunt libero, nisi quibusdam exercitationem hic vitae. Delectus animi blanditiis amet eos voluptatum.</p>
<div class="card-actions">
<a href="#" class="btn btn-primary">Book Now</a>
</div>
</div>
</div>
Packages Type Card Horizontal
<div class="card crd-hrz dyn-crd-psh">
<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-block">
<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-fluid img-ar4-5"
>
</figure>
</div>
<div class="col-cdhz-2">
<div class="card-body">
<h3 class="card-title">Unde maxime velit quia officia mollitia</h3>
<p class="card-text">Earum ullam voluptatum, in quas necessitatibus sed laudantium excepturi deserunt libero, nisi quibusdam exercitationem hic vitae. Delectus animi blanditiis amet eos voluptatum.</p>
<div class="card-actions">
<a href="#" class="btn btn-primary">Book Now</a>
</div>
</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">Ron White At Live! Casino & Hotel Maryland</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">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM <span class="recurring-event-period">daily</span></p>
<a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
</div>
</div>
Event Type Card Horizontal
<div class="card crd-hrz dyn-crd-eth">
<div class="row flex-fill g-0">
<div class="col-cdhz-1">
<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="img-fluid img-ar8-5 d-md-none"
>
</figure>
<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 d-none d-md-block"
>
</figure>
</div>
<div class="col-cdhz-2">
<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">Ron White At Live! Casino & Hotel Maryland</h3>
</div>
<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">The Hall At Live! Casino | 7002 Arundel Mills Cir. Hanover, MD | 7:00 PM <span class="recurring-event-period">daily</span></p>
<a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
</div>
</div>
</div>
</div>
</div>
Staff Bio Type Card
<div class="card dyn-crd-sbv">
<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="card-img-top img-ar1-1"
>
</figure>
<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>
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>
Staff Bio Type Card with Modal
<div class="card dyn-crd-sbv">
<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="card-img-top img-ar1-1"
>
</figure>
<div class="card-body">
<h3 class="card-title">FirstName LastName</h3>
<p class="card-text">Staff Title</p>
<div class="d-md-flex gap-2 justify-content-between">
<button type="button" class="btn btn-sm btn-outline-light" data-bs-target="#exampleBioModal" data-bs-toggle="modal">Read full bio</button>
<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 class="modal fade modal-staff" id="exampleBioModal" tabindex="-1" aria-labelledby="exampleBioModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleBioModalLabel"><span class="visually-hidden">Staff Bio</span></h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- BEGIN: Modal Content -->
<div class="row">
<div class="col-lg-5">
<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="card-img-top img-ar1-1"
>
</figure>
</div>
<div class="col-lg-7">
<h3>FirstName LastName</h3>
<p class="lead">Staff Title</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque explicabo atque quas adipisci dolor reprehenderit dicta perferendis repudiandae possimus! Quae aliquid id libero porro ratione minima, odit similique sit odio?</p>
<p>Nam fugiat unde atque, harum at, temporibus earum ipsa commodi assumenda modi voluptates? Provident iste nulla mollitia suscipit obcaecati qui sint, non ipsa ut error veritatis molestias a asperiores. Nisi?</p>
<p>Maiores ad labore ducimus fugit minima quam eaque ut est accusamus laudantium? Perspiciatis ipsa optio quia suscipit fugit. Aut quisquam vitae fugiat quas, officia placeat ab deleniti. Qui, soluta aperiam.</p>
<p>Eveniet veritatis provident et quos harum, ea odit mollitia impedit vel accusamus corporis voluptates dolorem laudantium ipsum, qui itaque temporibus, suscipit tenetur error cupiditate voluptatibus explicabo! Ipsa architecto maiores non.</p>
</div>
</div>
<!-- END: Modal Content -->
</div>
</div>
</div>
</div>
Video Card Type
<div class="card dyn-crd-vid">
<a href="#exampleVidCardModal1" data-bs-toggle="modal">
<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">
<h4 class="card-title">YouTube Video Example</h4>
<p class="card-text">Video Text</p>
</div>
</a>
</div>
<div class="modal fade modal-video" id="exampleVidCardModal1" tabindex="-1" aria-labelledby="exampleVidCardModal1Label" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleVidCardModal1Label">Youtube Video Title</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- BEGIN: Modal Content -->
<div class="ratio ratio-16x9">
<iframe
id="ytplayer"
class="hro-video-embed"
type="text/html"
width="640"
height="360"
src="https://www.youtube.com/embed/lM02vNMRRB0?autoplay=0&mute=0&controls=1&loop=0&disablekb=1&fs=0&modestbranding=1&playsinline=1&color=white&iv_load_policy=3"
frameborder="0"
title="Youtube Video Title"
allowfullscreen>
</iframe>
</div>
<!-- END: Modal Content -->
</div>
</div>
</div>
</div>
<div class="card dyn-crd-vid">
<a href="#exampleVidCardModal2" data-bs-toggle="modal">
<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">
<h4 class="card-title">Video Title</h4>
<p class="card-text">Video Text</p>
</div>
</a>
</div>
<div class="modal fade modal-video" id="exampleVidCardModal2" tabindex="-1" aria-labelledby="exampleVidCardModal2Label" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleVidCardModal2Label">Vimeo Video Example</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- BEGIN: Modal Content -->
<div class="ratio ratio-16x9">
<iframe
id="vimplayer"
class="hro-video-embed"
type="text/html"
width="640"
height="360"
src="https://player.vimeo.com/video/32001208?background=false&autopause=false"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
title="Vimeo Video Example"
allowfullscreen>
</iframe>
</div>
<!-- END: Modal Content -->
</div>
</div>
</div>
</div>