King Jack Queen

Cards

We leverage cards for our projects to provide a flexible and extensible content container with multiple variants and options.It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Accessibility

To ensure accessibility at all times use a high contrast color for the body text

Usage

The Cards component can be used to highlight projects on the homepage. Since they are responsive they can be stacked on each other depending on the the view port.

Example

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Meet the Joker

Code


<div class="card" style="width: 18rem">
<img class="card-img-top"
 src="../../images/Netflix_Show_Teaser.png"
  alt="Card image cap"
/>
<div class="card-body">
 <h2 class="card-title">Card title</h2>
 <h3 class="card-subtitle values mb-2">Card subtitle</h3>
 <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="dsystem-link card-btn">Go somewhere</a>
</div>