Card

Basic Card

A basic card has a white background and will stretch to 100% width of its parent container. Cards are customizable using various utility classes and the component has a header, body and footer sections.

<div class="card">
  <div class="card-header">
    <h3 class="margin-0">Header Content</h3>
  </div>
  <div class="card-body">
    <p class="font-size-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="card-footer">
    <a class="button button-primary">Read Article</a>
  </div>
</div>

Card with Image

An image can be added to the top of a card component by simply adding an image component within the card. The image classes .image-sixteen-by-nine, .image-four-by-three, and .image-three-by-two are the suggested sizes to use.

The example below is also combined with the flexbox grid to create a fluid and responsive layout for cards.

<div class="card">
  <div class="image-sixteen-by-nine">
    <img src="https://minio.dev.digitalservices.syr.edu/assets/images/rotc-helicopter.width-1100.webp" alt="Helicopter Evac" />
  </div>
  <div class="card-header">
    <h3 class="margin-0">Header Content</h3>
  </div>
  <div class="card-body">
    <p class="font-size-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="card-footer">
    <button class="button button-primary">Read Article</button>
  </div>
</div>