Card grid component

The title field is where to add the title or the heading for the entire card grid. Keep in mind title for specific card will be added later. For any supporting text, use the Description Text field below. Styling the title as an H2 is recommend.

The “description” field is where to add description text for the card grid. This should generally be to add context or more information about the card grid. Styling the description as a Paragraph is recommend.

The Card Grid CTA is where to add a call-to-action (CTA) that displays at the bottom of the card grid, below all of the cards. Choosing “select link” will bring up the url options.

The background color selector is where to choose the background color of the entire card component. Choosing the color of the specific cards is found later in the component.

“Card Grid Width” controls how wide the grid of cards is going to be.

• Content width: This size is set to fill a medium amount of space on the page.
• Full page width: If the cards begin to feel too cramped or the cards should be bigger, the “full page width” option will give more room to the card grid.

Once the settings are in place, it’s time to create the cards to fill the grid. To create the first card choose the “add” button. This will add the card with all of the fields to fill out.

Each card has its own option for how wide the card will be. These are designed to keep the card grid flexible and customizable. The sizes are as follows:

• Full width (1/1)
• Half (1/2)
• One-third (1/3)
• One-forth (1/4)

It’s recommended that each row should be designed to completely fill out the row. Ex. if there are three cards in a row the One-third should be used etc.

Enter a brief overline text that appears above the card title. Use this for labels or categorization.

The title of the specific card should be added into the “card title” field. This text can be formatted but will atomically be set to bold. Proper heading hierarchy’s should be used and the “Card Title” format should be used in these cases to keep the card titles to scale.

The main content of the card should be added in the “card text” field. The text can be styled using the provided styling options.

Choose to either add an image or an icon to the card.

To add an image click “add image.” The recommended dimensions for image are 1,230px by 820px (3:2) with a centered focal point.

Card image size: select which size the card images should be displayed as; Thumbnail, Small, or Large.

Image placement: Choose where the image will be positioned on the card to best fit your content layout; above or below.

An icon can easily be added to the display on the card using the Icon setting. Selecting this option will bring up the “Card Icon” drop down menu. Clicking this will bring up a search box to search for an icon to use. Simply selected the desired icon.

An additional color selection field will also appear called “card icon color.” This allows the color of the icon to be customized.

The “card background color” provides the color choice for the cards background. It’s important to make sure that the cards color is different from the background color selected so the cards are visible.

The “card hover color” refers to what color the card will change to when a mouse is hovered over it. This should only be used if the intention is to make the card a clickable link. If the card won’t have a link, match the card hover color to the background color. If the card is going to have a link, the blue is a great color option for this. In fact, this shade of blue was specifically chosen and named “interactive blue” to show users that this is something they can interact with.

To make a card clickable as a link, click the “select link” button. This brings up a pop-up box with the options to add a URL. A custom link can be added into the URL field. The search field can also be utilized to search the site for any already existing pages for easy linking.

Choose how to display the cards call-to-action.

• None: has no additional styling.
• Arrow: simply displays an arrow on the card.
• CTA button: creates a button with the “link text” filled in on the card.