Card Deck

Card Decks are used to present information in distinct sections. They are mobile responsive and can be laid out in many different ways.

Sample #1

  • Deck width: Single card width
  • View mode: Bordered Card

Sample Card #1

Science

Card decks can be displayed in many ways.

Sample Card #2

Students on a bench

They can include photos and links.

Test link

Sample Card #3

Chemical compounds written on a whiteboard

They can also be displayed with different widths or designs.

Sample #2

  • Deck width: Full width
  • View mode: Borderless Card

WHEN YOU USE A BORDERLESS CARD, THE WHOLE CARD FUNCTIONS AS A LINK.

How to Create a Card Deck:

  1. Create a Flexible Page
  2. Select the "Edit" Tab on the blue menu bar under the Title.
  3. Scroll to the bottom of the page and select “Add Card Deck.” This will create 3 "cards" which appear as shown on Sample #1 above.
  4. Add a Title to each individual card in the "Short Title" text box: This appears as the "Sample Card #1" on Sample #1 above.
  5. Add Photos to each individual card by selecting the gray "Browse" button under the "Photo" header. This will bring you to the "Media Browser" where you can select how you would like to upload your media.
  6. Create a text box under each card using the "Summary" section. This is shown on Sample #1 above, the bottom section of each card. (Note: This attribute is optional for creating a Card Deck.)
  7. The "Links" section below the "Summary" allows you to create a button that links to other pages on your site (internal links), or to other websites (external links). More information about links can be found here.
    1. Add a "Title" to the link, this is the text that will appear for the URL. Visitors will be able to click on this text to visit the linked pages or URL's you have attached.
    2. The "URL" section allows you to insert the URL or node of the site you would like to reference.
    3. The "Custom Link Class" adjusts how the link appears. For Example:
      1. "btn btn-default" creates a default button
      2. "card-link" makes the link normal text that links to your desired URL or node
  8. Save

Additional Tip: The "Create Card Deck" will default to create 3 Cards for you. If you would like to only create 2 cards, simply leave the 3rd card blank. This is shown in Sample #2 above. This can be useful for creating 2 or 4 cards. To create 4 cards, repeat the steps above twice, leaving the 3rd card blank in both decks.

Fields

  • Short Title: Title of the card
  • Photo: Photo attached to the card
    • Cropping dimensions: 548x456px
    • To crop the photo:
      1. Edit the image in the Files library (Content > Files)
      2. Modify the crop for "Card"
      3. Save the image
  • Summary: Details in the card
  • Links: Links associated with the card content
  • Display Settings: Deck width
    • Single card width: Every card is always the same size, equal to 1/3 of the page
    • Full width: The cards will expand to fill the width of the page
  • Additional options: View mode
    • Bordered Card: Grey background title with box outline
    • Borderless Card: White background with blue text and no box outline
    • Landing Grid (Deprecated): All white background with grey hover effect when linked