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 [MODIFIER] [COLOR_THEME] [BORDER_THEME]">
<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">
<img
srcset="../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
alt="Image description to show in lightbox"
class="card-img-top img-ar3-2">
<div class="card-body">
<h3 class="card-title">Title text</h3>
<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">
<img
srcset="../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
alt="Image description to show in lightbox"
class="card-img-top img-ar3-2">
</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-accent2 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">
<img
srcset="../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
alt="Card Image"
class="card-img-top img-ar3-2">
<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">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@md.jpg 960w, ../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1">
</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-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">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Card Image"
class="img-fluid img-ar8-5">
</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>
Room Type Card
<div class="card dyn-crd-rtv">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@md.jpg 960w, ../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Image description to show in lightbox"
class="card-img-top img-ar1-1">
<div class="card-body">
<h3 class="card-title">Title text</h3>
<p class="card-text">Card Text Lorem ipsum dolor, sit amet consectetur, adipisicing elit.</p>
<div class="rm-dtl">
<div class="rm-dtl-itm itm-beds">
<div class="heading">Beds 2</div>
<div class="item-value">Queen Beds</div>
</div>
<div class="rm-dtl-itm itm-guests">
<div class="heading">Guests 4</div>
</div>
<div class="rm-dtl-itm itm-anen">
<span class="visually-hidden">Amenities</span>
<i class="fa-solid fa-wheelchair" aria-label="Wheelchair Accessible"></i>
<i class="fa-solid fa-wifi" aria-label="Wifi"></i>
</div>
</div>
<a href="#" class="btn btn-outline-primary w-100 stretched-link">Book Now</a>
</div>
</div>
Room Type Card Horizontal
<div class="card crd-hrz dyn-crd-rth">
<div class="row flex-fill g-0">
<div class="col-cdhz-1">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@md.jpg 960w, ../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Image description to show in lightbox"
class="img-fluid img-ar1-1">
</div>
<div class="col-cdhz-2">
<div class="card-body">
<h3 class="card-title">Title text</h3>
<p class="card-text">Card Text Lorem ipsum dolor, sit amet consectetur, adipisicing elit.</p>
<div class="rm-dtl">
<div class="rm-dtl-itm itm-beds">
<div class="heading">Beds 2</div>
<div class="item-value">Queen Beds</div>
</div>
<div class="rm-dtl-itm itm-guests">
<div class="heading">Guests 4</div>
</div>
<div class="rm-dtl-itm itm-anen">
<span class="visually-hidden">Amenities</span>
<i class="fa-solid fa-wheelchair" aria-label="Wheelchair Accessible"></i>
<i class="fa-solid fa-wifi" aria-label="Wifi"></i>
</div>
</div>
<a href="#" class="btn btn-outline-primary w-100 stretched-link">Book Now</a>
</div>
</div>
</div>
</div>
Article Type Card
<div class="card dyn-crd-atv">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="card-img-top img-ar8-5">
<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">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="img-fluid img-ar8-5 d-md-none">
<img
srcset="../../../../assets/img//fpo/fpo-4-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-4-5@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-4-5@md.jpg"
alt="Image description"
class="img-fluid img-ar4-5 d-none d-md-block">
</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">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="card-img-top img-ar8-5">
<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>
<a href="#" class="btn btn-outline-primary stretched-link w-100">Book Now</a>
</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">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="img-fluid img-ar8-5 d-md-none">
<img
srcset="../../../../assets/img//fpo/fpo-4-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-4-5@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-4-5@md.jpg"
alt="Image description"
class="img-fluid img-ar4-5 d-none d-md-block">
</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>
<a href="#" class="btn btn-outline-primary stretched-link">Book Now</a>
</div>
</div>
</div>
</div>
Event Type Card
<div class="card dyn-crd-etv">
<img
srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
alt="Image description"
class="card-img-top img-ar16-9">
<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 | $30.00</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">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="img-fluid img-ar8-5 d-md-none">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@md.jpg 960w, ../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-fluid img-ar1-1 d-none d-md-block">
</div>
<div class="col-cdhz-2">
<div class="card-body">
<p class="card-date">
<span class="card-date-day">28</span>
<span class="card-date-month">Feb</span>
</p>
<div>
<h3 class="card-title">Ron White At Live! Casino & Hotel Maryland</h3>
<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 | $30.00</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">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@md.jpg 960w, ../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Image description"
class="card-img-top img-ar1-1">
<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="#">
<i class="fa-brands fa-facebook-f" aria-label="Facebook"></i>
</a>
<a href="#">
<i class="fa-brands fa-x-twitter" aria-label="Twitter X"></i>
</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">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@md.jpg 960w, ../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-fluid img-ar1-1">
</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="#">
<i class="fa-brands fa-facebook-f" aria-label="Facebook"></i>
</a>
<a href="#">
<i class="fa-brands fa-x-twitter" aria-label="Twitter X"></i>
</a>
</div>
</div>
</div>
</div>
</div>
Video Card Type
<div class="d-flex gap-2 w-100">
<div class="card dyn-crd-vid">
<a href="#exampleVidCardModal1" data-bs-toggle="modal">
<img
srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
alt="Image description"
class="card-img-top img-ar16-9">
<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">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"
allowfullscreen>
</iframe>
</div>
<!-- END: Modal Content -->
</div>
</div>
</div>
</div>
<div class="card dyn-crd-vid">
<a href="#exampleVidCardModal2" data-bs-toggle="modal">
<img
srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
alt="Image description"
class="card-img-top img-ar16-9">
<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"
allowfullscreen>
</iframe>
</div>
<!-- END: Modal Content -->
</div>
</div>
</div>
</div>
</div>