- Cards are used to highlight important content within a section of the site through a more visual format.
- Cards will show an image, title and short description (optional) and link to a selected page.
- Card rows may also be stacked to create a grid.
Card
How to Use
How to Build
Make sure you are using the “backend editor” to build out the component.
- Click the Add New Element plus icon to add a component to the page.
- An Add Element window will appear, choose the Row option.
- Hover over the columns tab in the top left of the new row added, choose the 2 or 3 column option.
- Click the Add New Element plus icon in one of the new columns.
- An Add Element window will appear, choose the Card option.
- The settings dialog box will appear. Fill in the appropriate fields.
- Click Save changes.
- Repeat from Step 4 for the rest of the columns.
(Refer content guidelines tab to understand how to write for this component)
Content Guidelines
- Cards can be used to create pathways for audiences to content located further within a section.
- A card is one element that contains an image and link with 1-2 sentences worth of text.
- Cards highlight key content and are meant to be placed three side-by-side in a grid.
- Authors can stack as many card rows as needed but it is recommended not to exceed three rows.
- Cards were designed to be placed in 1/3 + 1/3 + 1/3 row format with 3 cards per row.
Example

Card Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.