Cards

Cards are used within this design system to link to examples of work. Cards include an image, category, project title, and summary describing the content, as well as a link to the content.

Accessibility Considerations

To ensure accessibility, always include descriptive and meaningful alt text for card images and always style links as described in the typography section.

Usage

• Use cards to display a preview of content presented on other pages.
• Cards may be used to link to external sites and content.
• Cards must include a link, image, descriptive category, project title, and brief summary of the linked content.

Code Examples

<div class="row mb-5">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
    <div class="card">
      <img src="../img/img-placeholder.svg"
            class="card-img-top"
            alt="placeholder image of light grey rectangle with white x on top">
      <div class="card-body">
        <h3 class="card-subtitle mb-2">Category</h3>
        <h2 class="card-title">Project Title</h2>
        <p class="card-text">A brief summary of the card's linked
          content.</p>
        <a href="#"
            class="card-link">Link to content</a>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-12 col-lg-6">
    <div class="card">
      <img src="../img/img-placeholder.svg"
            class="card-img-top"
            alt="placeholder image of light grey rectangle with white x on top">
      <div class="card-body">
        <h3 class="card-subtitle mb-2">Category</h3>
        <h2 class="card-title">Project Title</h2>
        <p class="card-text">A brief summary of the card's linked
          content.</p>
        <a href="#"
            class="card-link">Link to content</a>
      </div>
    </div>
  </div>
</div>