Vertical Cards

What is a vertical card block?

Vertical Cards are a set of cards or grouping of content items on a row that allow you to add an optional image, an eyebrow (a small, attention-grabbing headline), a title (optionally linked), a description, and a Call To Action (CTA).

Example of a Vertical Cards Component

Optional introductory text

Card heading number one

Card Topic
Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.

Card heading number two

Card Topic
Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.

Card heading number three

Card Topic
Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.

How to add vertical cards:

    1. In the page edit view, add a new block called Vertical Cards.
    2. The following empty blocks will be placed: a Button Style Cards block with Section Heading and Vertical Cards Items blocks nested within.
    3. In the section heading block, optionally fill out the Heading and Introduction fields or add Calls to Action links by clicking the plus icon in the lower right.
    4. Fill out the first card by adding an Eyebrow, Heading and/or Body text. You can also add the following by using the block settings on the right sidebar:
      1. Add an Image and alt text by using the Alt override field.
      2. Add the Heading URL.
    5. To add more cards, select the parent vertical cards items block, then click the plus sign at the lower right.
    6. Select the outermost vertical cards block to show further configuration options in the block settings in the right sidebar:
      • Columns: Select the number of columns you would like the cards to display in.
      • Card heading level: Select the heading level which fits in your content’s hierarchy.
      • Change the width/alignment or color scheme.
    Screenshot showing the vertical cards block in the block editor, including the outline on the left, and the block settings on the right where you would add the image