Card Grid Block

The Card Grid Block adds a custom number of “cards” to a page, providing engaging links to contextual material.

Card Grid Block Guidelines

• Use cards as an entry point to more detailed information.
• Use to present a quick overview of information and give the option to link to the view the full information.
• Keep your card titles as brief as possible to prevent unintended wrapping or text overflow.
• Follow all Image and Media Requirements and Best Practices.
• Review the Recommendations for Accessible Theme Blocks page to learn more about requirements for headings, images, and links published in this panel.
• Use of this block for an undocumented purpose or in a non-standard way is discouraged and may not be supported.

How to Add a Card Grid Block to the Page

• In the page editor, click on the blue box with the plus sign located at the top left of the page. The alternative text for this link is called “toggle block inserter”. This will open a menu of available blocks to select from.

• A list of blocks sorted into 6 groups will be displayed. Either type “card grid” into the search field to filter the list or scroll down to the group called Theme to find the Card Grid block. Click on it and the block will be added to the page.
• Each block comes with its own toolbar that appears on top of the block. The icons and features in the toolbar change depending on the block you are editing. This is what the Card Grid toolbar looks like:

• Note: To move your block content entry fields from the narrow right column to the middle of the page editor, go to the block’s toolbar and click on the pencil icon with the alternative text, “switch to edit”. This will move the fields to the middle of the page. If you want to preview the page as you are building it, click on the monitor icon and the text fields will move back to the right side of the editor. You can toggle between these two options.

Content

Title: This is an optional, but recommended text field. Content entered here will appear as the card grid block header text.

Accent Title: This is an optional text field. This content appears above the title in a smaller font.

Description: This is an optional text field, and may be used to help describe the purpose of the card grid. This content should be kept brief for design purposes.

Cards: Add cards by selecting the “Add Card” button. The Card Grid block requires a minimum of 2 cards. When you click Add Card, the first card will display. There will be a number 1 in the vertical bar to the left of the fields to indicate it is the first card.

Card Title: This is the text that will display on the front of your card. If you’re using a solid color background, your text will fill the card. If you’re using an image as a Card background, your text will take up the lower-left portion of the card.

Image: Select an image for your Card background. Optimal image size is 664px x 664px.

Link: If you want to include a call to action link, click the “Select Link” button. A window will pop open displaying fields where you can enter the URL, Link Text, a checkbox if you want the link to open in a new tab, and an option to search for and select an existing page to link to. If you add Link Text, this link must be unique to meet accessibility requirements (avoid generic link texts like “Click me” and “Here”). When you have filled out the fields, click the “Add Link” button to complete the process.

Settings

Layout: The default Card Grid layout is “Inline”. This layout stacks the cards in two columns with the optional description on the left. The other layout option is “Stacked” and it arranges the cards horizontally in a row, with the optional description above. See sample card grid blocks below.

Card Columns: If you utilize the horizontal layout, you can select a 3-card or 4-card layout option.

Card Type: The choices are Fill (for blue or orange backgrounds) or Stroke (for a white background with a colored border). The default is Fill. The Fill choice is used if no image has been selected for the Card.

Card Color: This is a select field. The default selection is orange. The choices are orange or blue. This selection fills the Card backgrounds with a color when an image is not present.

Heading Size: The block title will appear on the page as an H2. For accessibility reasons, do not change this to H1 unless otherwise directed.

Add Top Padding: Defaults to Yes, which places the standard empty space above your block. The recommendation is to leave it set to Yes.

Add Bottom Padding: Defaults to Yes, which places the standard empty space below your block. The recommendation is to leave it set to Yes.