Cards - Unify Digital Design System

# Basic Cards

Basic cards consist of a Card Title, Card Content and a Card button.

Card Title

Card titles can use color and alt classes just like any other heading.
Due to accessibility concerns it is recommended to use faux headings for card titles.

Card Content

Card content can technically be any valid HTML but it is recommended to keep it to a single, short paragraph or excerpt.

Card Button

The card button uses the <a> tag and can use color and alt classes just like any other button. It is recommended to place the button directly underneath the card content and to use the .sm button size.

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Example Markup


  <div class="card">
    <div class="card-header"></div>
    <div class="card-body">
      <div class="card-title faux-heading h4">Media Studies</div>
      <p>Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity. </p>
      <a href="/path/to/page" class="btn sm">Learn More</a>
    </div>
    <div class="card-footer"></div>
  </div>

# Card Alignment

By default a Card's contents are aligned to the left. You can change the alignment to either right: .align-right or center .align-center.

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Example Markup


  <div class="card primary">
    <div class="card-header"></div>
    <div class="card-body">
      <div class="card-title faux-heading h4">Media Studies</div>
      <p>Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity. </p>
      <a href="/path/to/page" class="btn sm">Learn More</a>
    </div>
    <div class="card-footer"></div>
  </div>

  <div class="card align-center">
    ...
  </div>

  <div class="card align-right">
    ...
  </div>

# Card Colors

In addition to the default white card, you can also choose between 3 other alternate colors to fit your UI needs; .primary, .black and .gray.

Note: When using card colors classes the title and content colors will automatically adjust to contrast with the card color but you are free to use any color classes for the card button.

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Example Markup


  <div class="card primary">
    <div class="card-header"></div>
    <div class="card-body">
      <div class="card-title faux-heading h4">Media Studies</div>
      <p>Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity. </p>
      <a href="/path/to/page" class="btn sm">Learn More</a>
    </div>
    <div class="card-footer"></div>
  </div>

  <div class="card black">
    ...
  </div>

  <div class="card gray">
    ...
  </div>

# Image Cards

Cards can also use images within the card header. To keep the sizing of card images consistent we render the image as a background-image with a dynamic width and a height of 200px. By default card images are positioned horizontally and vertially centered.

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Student Life

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Example Markup


  <div class="card">
    <div class="card-header">
      <div class="card-img" style="background-image:url'(/path/to/file.jpg')"></div>  
    </div>
    <div class="card-body">
      <div class="card-title faux-heading h4">Media Studies</div>
      <p>Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity. </p>
      <a href="/path/to/page" class="btn sm">Learn More</a>
    </div>
    <div class="card-footer"></div>
  </div>

# Alternate Layouts for Image Cards

In addition to image cards, you can also choose between 4 alternate layouts to fit your UI needs; .left(aligns the image to the left), .right(aligns the image to the right), .left diag(aligns image to left with a diagonal cropping) and .right diag(aligns image to right with a diagonal cropping). Each of these classes can be used in conjunction with color classes.

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Student Life

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Student Life

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Learn More

Example Markup


  <div class="card left">
    <div class="card-header">
      <div class="card-img" style="background-image:url'(/path/to/file.jpg')"></div>  
    </div>
    <div class="card-body">
      <div class="card-title faux-heading h4">Media Studies</div>
      <p>Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity. </p>
      <a href="/path/to/page" class="btn sm">Learn More</a>
    </div>
    <div class="card-footer"></div>
  </div>

  <div class="card right">
    ...
  </div>

  <div class="card primary left diag">
    ...
  </div>

  <div class="card black right diag">
    ...
  </div>

# Card Link

Any card type can be wrapped in an <a> tag with a class of .card-linkto make the entire card clickable.

Note: Due to accessibility concerns it is recommended to omit the card button within the card body to avoid multiple instances of the same link.

Media Studies

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Student Life

Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.

Example Markup


  <a href="/path/to/page" class="card-link">
    <div class="card">
      <div class="card-header">
        <div class="card-img" style="background-image:url'(/path/to/file.jpg')"></div>  
      </div>
      <div class="card-body">
        <div class="card-title faux-heading h4">Media Studies</div>
        <p>Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity. </p>
      </div>
      <div class="card-footer"></div>
    </div>
  </a>