Introduction

Cards

Cards group related information visually, resembling a playing card, to encourage users to click or tap to view more details. Cards contain content and an action about a single subject. When it makes sense, cards can have a few actions but they should still all be related to a single subject. Cards should be used to callout a piece of content for a user to consume in greater detail.

When to use

Use this component when there is a callout to more information.

Images and icons are mutually exclusive. A card shouldn’t feature both an image and an icon in the same card.

Component properties

Decorative Bar – check this box to add a decorative bar. It will appear above the heading on the card.

  • Currently, the decorative bar’s color cannot be adjusted and base styling will apply if you toggle the bar on.
  • If you have 3 cards in a row and apply decorative bars, they will populate as follows:
    • Card 1: Pool
    • Card 2: Gold
    • Card 3: Lawn

Frame(s):

Though the cards are meant to be placed into and controlled by the Card Deck, they can also be inserted into certain frame sets.

Default Cards can be added to the following frames:

  • 6-6
  • 4-4-4
  • 3-3-3-3

Carousel Cards can only be added to the 4-4-4 frames and the Slider component due to their design.

Sitecore field(s):

Default Cards:

  • Heading (Required)
    • Single line text field
    • Word Count Limit: Approximately 25 words
  • Description (Optional)
    • Multi line text field
    • Word Count Limit: 40 word count for paragraph text
  • Image (Optional)
    • Png
    • Jpg
  • Icon (Optional)
    • Png
    • Svg
  • Action Label (Optional) – use this if you want link text on your card, though it is not required
  • Link (Required)
    • Note: A link is required. If a link is not included, a card will not render on the live page.

Note: On mobile or tablet, if no Action Label is supplied, an arrow icon will be present to indicate that the card is an interactive element since there is no hover state on mobile or tablet. This arrow icon cannot be changed out and the color cannot be adjusted.

Carousel Cards:

  • Date
  • Heading
    • Single line text field
    • Word Count Limit: 69 characters or less (approx. 16 words or < />
  • Description
    • Multi line text field
    • Word Count Limit: 96 characters or less (approx. 22 words or < />
  • Category (icons are tied to the category)
    • webinar
    • article
    • podcast
    • guide
    • report
    • event
  • Link
    • A link is required. If a link is not included, a card will not render on the live page.

Image specs

Default card suggested image upload size: 768x250.

This 768x250 image size tends to work across all viewports and will prevent the image from being stretched at certain screen sizes. Subject in center of photo tends to produce best results and will prevent the subject from being cropped out at certain viewports.

Available card columns:

  • 2 cards - image size: Desktop: 185px height | Tablet: 185px | Mobile: 250px height
  • 3 cards - image size: Desktop: 185px height | Tablet: 185px | Mobile: 250px height
  • 4 cards - image size: Desktop: 185px height | Tablet: 185px | Mobile: 250px height

Default carousel card suggested image upload size: 345w x 355h.

Spacing

Top card image spacing

Spacing of card with top image

Card with top icon spacing

Card with top icon spacing

Card with side icon spacing

Card with side icon spacing

Examples of cards below

These are only examples as we know.

If you have a questions about what is possible, please reach out.