Cards

Cards are flexible content containers. They may contain a headline, image, or copy, along with a link. Cards provide the opportunity to format blocks of content and short calls-to-action.

Basic Card

Card Title

Short card description. Lorem ipsum dolor sit amet.

Card with Hover

A description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque in rebus minime obscuris non multus est apud eos disserendi labor.

<!-- Basic card with no hover effects -->
<div class="card">
  <div class="card-body">
    <h2 class="card-title"><a class="card-link" href="#">Card Title</a></h2>
    <p>Short card description. Lorem ipsum dolor sit amet</p>
  </div>
</div>

<!-- Basic card that changes background on hover -->
<div class="card hover-bg">
  <div class="card-body">
    <h2 class="card-title"><a class="card-link" href="#">Card Title</a></h2>
    <p>A description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque in rebus minime obscuris non multus est apud eos disserendi labor.</p>
  </div>
</div>

Card with Image

Cards with images use an element with the .card-image class to wrap the image.

Photo of Campus

Card Title

A description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque in rebus minime obscuris non multus est apud eos disserendi labor.

Photo of Campus

Card Label

Card Title

Short card description. Lorem ipsum dolor sit amet.

<div class="card">
  <p class="card-image">
    <img src="image.png" width="600" height="400" alt="Photo of Campus">
  </p>
  <div class="card-body">
    <h2 class="card-title"><a class="card-link" href="#">Card Title</a></h2>
    <p>A description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque in rebus minime obscuris non multus est apud eos disserendi labor.</p>
  </div>
</div>

<div class="card">
  <p class="card-image">
    <img src="image.png" width="600" height="400" alt="Photo of Campus">
  </p>
  <div class="card-body">
    <!-- The `.card-label` class can be used to add a label -->
    <p class="card-label">Card Label</p>
    <h2 class="card-title"><a class="card-link" href="#">Card Title</a></h2>
    <p>Short card description. Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Card CSS Reference

Class Description
.card Container used to wrap card content.
.card-body Element containing copy used in card.
.card-image Element containing the card’s image.
.card-title Used to designate title of card.
.card-link Used to designate link of card.
.card-label Used to style a label or tag for the card.
CSS Variable Description
--card-image-width Controls width of card image.
--card-padding Controls the padding of card.

Hover Options

Additional classes can be added to the markup to add various hover effects.

<!-- Card that changes background and grows on hover -->
<div class="card hover-bg hover-grow">
  <p class="card-image">
    <img src="/assets/images/placeholder-campus-2-600x400.jpg" width="600" height="400" alt="Photo of Campus">
  </p>
  <div class="card-body">
    <h2 class="card-title"><a class="card-link" href="#">Card with .hover-bg and .hover-grow</a></h2>
    <p>Short card description. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
</div>

<div class="card">
  <p class="card-image">
    <img src="/assets/images/placeholder-campus-2-600x400.jpg" width="600" height="400" alt="Photo of Campus">
  </p>
  <!-- The `.hover-more` class will show an arrow to the right of the element on hover. If we want the arrow to be vertically aligned with the card body, and not the image, we add it to the `.card-body` element. -->
  <div class="card-body hover-more">
    <h2 class="card-title"><a class="card-link" href="#">Card with .hover-more</a></h2>
    <p>Short card description. Lorem ipsum dolor sit amet.</p>
  </div>
</div>
Class Description
.hover-bg Used to change the background color of the element on hover.
.hover-more Used to show a vertically centered arrow on the element on hover. For stacked cards, this should be added to the card-body.
.hover-grow Used to scale up the element on hover.

Horizontal Options

To have the cards show up horizontally, with the image to the left of the card body, add the horizontal class to the card element.

<!-- Horizontal card that changes background on hover -->
<div class="card horizontal hover-bg">
  <p class="card-image">
    <img src="assets/images/placeholder-campus-2-600x400.jpg" width="600" height="400" alt="Photo of Campus">
  </p>
  <div class="card-body">
    <h2 class="card-title"><a class="card-link" href="#">Horizontal Card with Hover State</a></h2>
    <p>Short card description.</p>
  </div>
</div>

<!-- Horizontal card that shows arrow on hover -->
<div class="card horizontal hover-more">
  <p class="card-image">
    <img src="assets/images/placeholder-campus-2-600x400.jpg" width="600" height="400" alt="Photo of Campus">
  </p>
  <div class="card-body">
    <h2 class="card-title"><a class="card-link" href="#">Horizontal Card with More Arrow</a></h2>
    <p>Short card description.</p>
  </div>
</div>

Breakpoints

By default, cards marked with horizontal will switch to a horizontal layout at the medium breakpoint. Until then, they will be stacked. To override this, you can use the following horizontal-* and stacked-* classes to set the breakpoints at which a card will switch from stacked to horizontal, or vice versa.

Class Description
.horizontal Switch to horizontal style at medium breakpoint and up.
.horizontal-xs Use horizontal style on smallest screens and up.
.horizontal-sm Switch to horizontal style at small breakpoint and up.
.horizontal-md Switch to horizontal style at medium breakpoint and up (same as using .horizontal).
.horizontal-lg Switch to horizontal style at large breakpoint and up.
.horizontal-xl Switch to horizontal style at x-large breakpoint.
.stacked-sm Switch to stacked style at small breakpoint and up.
.stacked-md Switch to stacked style at medium breakpoint and up.
.stacked-lg Switch to stacked style at large breakpoint and up.
.stacked-xl Switch to stacked style at x-large breakpoint and up.