Vertical Cards

How to add a Vertical Cards component

Step 1: Add and configure Vertical Cards component

1. Add a Vertical Cards component (see Adding a component for instructions on how to add a component).
2. Select the Section Heading tab to add an optional section that appears at the top of the Vertical Cards component (see Adding a component heading for details about adding a section heading).
3. Select the Block Settings tab.
4. Add an optional Page Anchor Link to allow for links to the Vertical Cards component (see instructions under Linking to page content).
5. Select a heading level from the Card Heading Level menu that correctly reflects the information structure of the content. For example, if your Vertical Cards component has a H2 heading, the Card Heading Level (the headings on individual Vertical Cards) should be H3.
6. Select the Color Settings tab.
7. Select from the Color Scheme menus:
   1. Component Color Scheme: Background and foreground colors for the overall component.
   2. Card Color Scheme: Background and foreground colors for cards. 
8. Review the Component Color Scheme Preview to see the effect of changing the color settings.

Step 2: Add a Vertical Card item

1. Select the Content tab.
2. Use the arrow controls or enter a value in the Columns field. This value should be the number of cards to display in a single row; to display four cards in a single-row grid, set the number to 4.

3. Select the Add Vertical Card button.
4. Fill out the following information:
   1. Eyebrow: Keywords that display above a heading. This could be a topic category.
   2. Heading: A heading that describes the linked resource. The heading also serves as the link text for the linked resource.
   3. Heading Link: The URL of the highlighted resource, to learn more.
   4. Body: Introductory text that further describes the referenced resource. This should be no more than a few sentences with details that compel users to follow the link to learn more.
5. Next you have the option to add an image to the component by selecting the Add image button. You can select an image from the media library or upload a new image (see Media Library for details about working with the media library).
   1. The optimal image size (in pixels) for a Vertical Card component is 960 x 540 (see Image Sizes for more details).
6. Provide the appropriate alternative text or mark the image as decorative, depending on the role of the image on the page (see When to add alt text for best practices for providing alternative text).

Step 3: Save Vertical Cards component

1. Preview the Vertical Card item in the Vertical Cards section of the Create new Vertical Cards dialog. You can add more Vertical Card items by clicking the plus sign next to the first Vertical Card item.
2. Once you have finished adding Vertical Card items, choose Save to save the Vertical Cards component.