The vertical card provides a graphic way for users to drill down to highlighted content.

The Vertical card can display from one to 5 cards in a row and cards can be organized in multiple rows. Each card, or tile, uses a graphic, and each graphic used should share the same aspect ratio. This is one reason we commonly size landscape images to 900 x 600 pixels.

The images can be added to the component using the same drag-and-drop method used for the Image component.

In addition to the graphic, there is button text that links to the desired page or asset. For accessibility, each button should have unique text.

There are optional fields for a Title and Description text if needed to clarify the links or give additional context.

The default display is a ‘Raised’ style that applies a subtle drop-shadow around each item and shows a button for the link. There is also the option of a ‘Flat’ style without the drop-shadow, where the link is displayed with arrows rather than button styling.

Finally, there is an ‘Icon’ style that is best used with Scalable Vector Graphics, or SVG icons. When the Icon style is applied, the entire area of the card becomes a clickable area, rather than just the button text.