Card Grid Panel

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

Card Grid Panel 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 Panels page to learn more about requirements for headings, images, and links published in this panel.
• Use of this panel for an undocumented purpose or in a non-standard way is discouraged and may not be supported.

How to Configure the Card Grid Panel

• In the WordPress editor, select Add a New Panel or or Live Preview.
• Select the “Card Grid” panel.
• Title: This is an optional, but recommended, field. Content entered here will appear as the panel header text. Note: leaving this field blank may result in an accessibility error. Review your final page to ensure all headings are listed in order.
• Accent Title: This is an optional text field. This content appears above the title in a smaller font.
• Description: This is an optional WYSIWYG field, and may be used to help describe the purpose of the card grid. This content should be kept brief for design purposes.
• Cards: A default of two cards are present when panel is created. Add additional cards by selecting “Add Card.” The Card Grid panel requires a minimum of 2 cards.
• Card Title: The text that will appear on the 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 the card.
• Image: Select an image for your Card background. Optimal image size is 664px x 664px.
• Call to Action Link: If you include a call to action, type the URL and add an optional label. If you add an optional label, this link must be unique to meet accessibility requirements. Otherwise you can leave the label field blank.

Settings

• Layout: The default Card Grid layout is two columns, placing the optional description on the left. You can also choose the align the Cards horizontally below the description.
• 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 Stroke. 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 when an image is not present.
• Panel Left Border: Enable or disable the vertical border on the left side of the panel using this setting.