Info Card Grid

The info card grid is a grid of cards that contain content and actions about a single subject. This component is based on USWDS.

Sower offers a few variations:

• with images on a white background (info card grid)
• with images on a dark background (info card grid filled)
• with icons on a dark background (info card grid icons filled)

The number of cards per row adjusts automatically based on the page template and the section the block is placed in. There is no maximum number of cards, but one to two rows is recommended for readability.

When the Info Card Grid is placed inside a section with a theme background color, card heading, fill background, and button colors automatically adapt to match the section's color theme. No additional configuration is needed.

Info card grid:

How to author:

• In the DA menu, go to Library > Blocks > Info Card Grid > and select info-card-grid.

• Replace the default images, headings, descriptions, and buttons with your content. To replace the image, you can drag an image from your desktop to the image area in the block.

• Be sure to add alt text for your images, so that screen-readers can convey visual content to vision-impaired users.  Well-crafted alt text is essential for ensuring web accessibility and usability. To add alt text, select your image and then select "Alt text" in the DA menu and type it into the field.

• To remove a card, delete its row in the table. To add a card, add a new row to the table by placing your cursor in the table. Select Edit Block in the DA menu and add a row:

  

Info card grid (Filled):

Info Card Grid w/ Icons