Info Card Grid

The info card grid is a grid of cards that contain content and actions about a single subject. Sower offers two variations: one with images on a white background (info card grid) and one with icons on a blue background (info card grid blue).

Grids can contain

This component is based on USWDS.

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 (blue):

How to author:

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

• Replace the default icons, headings, descriptions, and buttons with your content. You can replace the icons with any of the 243 icons included in USWDS.

• 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.