Content

  1. Text Alignment: Choose to left justify (Default) or center align your headline, subheadline, image, and button.
  2. Image: Select an image from the DAM and alt text for screen readers/search crawlers.  A preview of your image will appear in the preview pane once the path is specified.You can use this for an icon or a full bleed image. The width of the full bleed image would be the same as the column it is placed in.
  3. Headline: Specify the column frame headline, SEO tag and style
  4. Subheadline: Specify the basic card subheadline, SEO tag and style.
  5. Button
    • Label: This is the user-facing text for your button.
    • Styling: Choose from primary, secondary or tertiary styling options for your button.
    • Action: Choose whether you want your card to be a link, scroll to another component, or open in a modal.
    • Tooltip: This tooltip appears to the user when hovered over the button.

Basic Card with icons

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat rhoncus risus eget dictum.

Button

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat rhoncus risus eget dictum.

Button

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat rhoncus risus eget dictum.

Button

Do's & Don'ts

While Basic Card offers a dozen different layout styles, you don’t want to mix and match them. Use one layout style for your entire list.