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.

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.

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

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.

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.