Cards

BetterUp's Cards module is a versatile module for including cards in your content. These cards have several layout options for displaying a variety of content, and can be linked or unlinked.

Fields

• 
  Background

  See background. Note that the Cards module only supports a black, white, or gray solid background, as the cards themselves have a background image.

• 
  Module spacing

  See module spacing.

• 
  Card type

  Select a card type. Options are:

  • Full bleed cards - Full bleed cards take up 100% of the page width. There are designed to be 4 of these. The cards start with an overlay- when the card is hovered over, the overlay is removed, and the description & link is revealed.
  • Standard cards - These cards are full width, with space in between each card. These have an optional intro, and several interaction options on hover. If there are too many cards to fit horizontally in the page, the cards will become a slider.
• 
  Add Introduction

  Appears if "Standard Cards" is selected under "Card Type". Check this box to add an introduction to your module.
• 
  Introduction

  Dropdown for adding an introduction to your cards module. Click to see introduction fields. Appears if "Add Introduction" is checked.
• 
  Eyebrow

  In the introduction dropdown. Add an eyebrow to your introduction.
• 
  Heading

  See heading.

• 
  Description

  In the introduction dropdown. Add a description to your introduction.
• 
  Text placement

  In the introduction dropdown. Choose where the introduction should be placed on desktop. Options are:

  • Top of cards
  • Left of cards

  Note that the introduction will always appear on top of the cards on smaller screens.

• 
  Text Layout

  In the introduction dropdown. Only appears if "Text placement" is set to "Top of cards". Options are:

  • Stacked & center alignment
  • 2 column split
• 
  Cards

  Repeatable card items. If "Full bleed cards" is selected under card type, this section has a maximum of 4 items.

• 
  Card - Full Bleed Options

  Options available in full bleed cards. Options are:

  • Background - see background. All background options are available. This is set individually per card.
  • Eyebrow - Eyebrow will always be visible on the card.
  • Title - Title will always be visible on the card.
  • Description - Appears on hover. If this section is left blank, the card text will be aligned to the bottom of the card. If there is a description, the card text will be aligned to the top of the card.
  • Add link - Check this to add a link to the card. See link. If no link label is applied, an icon will appear (play button for a video modal link, arrow icon for all other links).
• 
  Standard Card Layout & Interaction

  Appears if "Standard cards" is selected under "Card Type". Options are:

  • Simple card - card with background and text overlay. All information is always visible.
  • Split card - image on top, text on bottom. All information is always visible. Does not support a description.
  • Flip card - card will show background, eyebrow, & title by default, and flip to a solid background and description/link on hover.
  • Hover card - card will show background, eyebrow, & title by default, and display description on hover & link.
• 
  Card - Standard Options

  Options available in full bleed cards. Options are:

  • Image - Apply a background image to your card.
  • Eyebrow - Eyebrow will always be visible on the card.
  • Title - Title will always be visible on the card.
  • Description - Appears on based on option selected in "Standard card layout & interaction".
  • Add link - Check this to add a link to the card. See link. If no link label is applied, an icon will appear (play button for a video modal link, arrow icon for all other links). If a link label is applied, a CTA will appear.
• 
  Add an anchor

  See Anchor.