Cards

Cards are used to organize content on a page. You will be limited to 4 cards per row. 

There are two options for cards: bordered or borderless. Bordered cards place a thin grey border around the card perimeter, while borderless cards do not. 


How to Create Cards

  1. Create a page or edit an existing one.
  2. Click Add Cards.
  3. Select number of cards per row (3 is standard, but up to 4 cards are allowed).
  4. Under Card Style, choose between Bordered or Borderless.
  5. Select the desired amount of space at the bottom of the card row before the next element displays under Additional Options > Bottom Spacing.
    • Under Additional Options, you can also edit the display on tablets and phones. More detail is provided in Alternative Displays below.
  6. Select Card BackgroundAdd Media, enter a Card Title, enter a Card Body, and add a Card Link Title and Card Link URL (all fields are optional)
  7. Click Add another item to add more cards..
  8. Save.

Sample Bordered Card

Below is a bordered card that demonstrates the display of a card with an image and text, a card with an image and a link, and a card with text and a link.

wildcat sculpture

Card One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tucson sign

Card Two

Card Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Sample Borderless Card

Below is a borderless card row that demonstrates the display of a card with an image and text, a card with an image and a link, and a card with text and a link.

uofa

Card One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

dancing girls

Card Two

Card Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Within a card deck, you can also choose the number of cards displayed on a tablet or phone under Additional Options. Both these displays allow up to 4 cards per row, but it is recommended to leave the display settings at default.

Below are examples of the alternative card deck sizes and the different card colors. On the left is the mobile display, and on the right is the tablet display.

  

Image
phone card display
Image
tablet card view