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.
    • You also have an option to make all the cards clickable (for cards that have an associated card link).
  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 link with the fields Card Link Title and Card Link URL, and Card Link Style. (All fields are optional.)
  7. Click Add another item to add more cards.
  8. Save.

Sample Bordered Cards

Below is a row of bordered cards 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 Cards

Below is a row of borderless cards 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.


Sample Clickable Cards and Card Link Styles

Below is a row of clickable borderless cards 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. The second and third cards show how the links appear when an alternate Card Link Style is selected.

uofa

Card One

This card is set to be clickable, but since no link is specified for this card, it cannot be clicked.

dancing girls

Card Two

Card Three

For Sample Link 2 below, the Card Link Style is set to "Red outline button".

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