UMC Digital
UMC Sites

Cards

Cards provide an extensible content container for a single subject. Cards are typically used in a grid-style format using flex containers.

Rather than having a messy jumble of text, neatly organize your content using our card widget. There are several options you can customize to your liking.

 

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.
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.

Default Buttons are Utah Red and can be used in 3 different sizes: small, default, and large.

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

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

Full-Width Buttons

Generally used sparingly and only in tight spaces. Full-width buttons will stretch the entire width of the parent container and can be used in any size and color.

Note: It is good practice to only use full-width buttons within a confined width and should not exceed the supporting text.