This design system utilizes three cards states. The first: an image, title, description, and button. The second: an image, title, and description. The third: a title and description.
Cards
Card Variations
Card Title
Card body
Card Title
Card body
Card Title
Card body
Card Title
Card body
Accessibility Considerations
Any image should use the "alt" tag to describe what is happening in the image. Styles for the cards are based on the primary colors and type defined in the Foundational category.
Usage
-
Cards provide structure and insight into the content found on the website. Use cards when previewing work or displaying individuals concepts.
-
There are 3 variations of the card layout. Use the button when you need the card to navigate the user somewhere.
-
Non-image cards may be used as labels or short lists. For example, skills/abilities.
Code Examples
Image, Header, Description, and Button Card
<div class="card mx-auto w-50" id="card-1">
<img src="../media/imgs/colors/Grayscale%20300.png" class="card-img-top" alt="Primary blue color">
<div class="card-header p-3 rounded-bottom" id="color-card-header">
<h5 class="card-title">Card Title</h5>
<p class="card-body p-0">Card body</p>
<button class="btn btn-secondary" id="secondary-btn">Button ▶</button>
</div>
</div>Image, Header, and Description Card
<div class="card mx-auto w-50" id="card-1">
<img src="../media/imgs/colors/Grayscale%20300.png" class="card-img-top" alt="Primary blue color">
<div class="card-header p-3 rounded-bottom" id="color-card-header">
<h5 class="card-title">Card Title</h5>
<p class="card-body p-0">Card body</p>
</div>
</div>Header and Description Card
<div class="card mx-auto w-50" id="card-1">
<div class="card-header p-3 pb-0 rounded" id="color-card-header">
<h5 class="card-title">Card Title</h5>
<p class="card-body p-0">Card body</p>
</div>
</div>