Cards and card decks

Cards are used to organize content on a page. Anything can be put into a card (events, news articles, people, to-do list, etc.) including images and links.

Quickstart supports the display of single cards and card decks (one, two, or three cards). Both single cards and card decks are mobile responsive.

In addition to the three Quickstart card deck types below, there are UA Bootstrap card and card deck options you can add to your site using html fields.

Quickstart card decks

Borderless Card Decks with Photos

To create this example:

  1. Click Add Card Deck
  2. Enter a title, upload a photo, enter a summary, and add a link (all fields are optional)
  3. Under Additional options, select "Borderless Card"
  4. Save your page

Card one

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

Card Two

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

Card Three

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

Bordered card decks

To create this example:

  1. Click Add Card Deck
  2. Enter a title, upload a photo, enter a summary, and add a link (all fields are optional)
  3. Under Additional options, select "Bordered Card" (this is the default card deck type)
  4. Save your page

Card one

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

Card one link

Card two

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

Card two link

Card three

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

Card three link

Full Width with Photos

To create this example:

  1. Click Add Card Deck
  2. Enter a title, upload a photo, enter a summary, and add a link (all fields are optional)
  3. In the Deck width field, select "Full width"
  4. Under Additional options, select "Bordered Card" (default)
  5. Save your page

Note: Only card decks with one or two cards will have the full width effect. Card decks with three cards will display as they do above (they are already full width).

Full width card one

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

Full width card two

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