The Cards block helps you create a row or grid of “cards” that can be used to highlight and draw more attention to special or featured content on the site. You may want to highlight some specific programs people can apply for or new residents joining your department using this block. The card block can support one image per card, and multiple cards per block. You are also able to limit the number of cards displayed in each row to create a grid that best displays your cards.
Columns
The columns setting will allow you to choose how many columns of cards to display and each card will automatically expand or contract to fit the space on the page. See the example of the Card block below set to 3 columns so all 9 cards are displayed in a grid.
Card Styles
The Card block has three options for the style of card that will display. Each card can be set individually to either a card, text, or outline style. The color of the card style will will change depending on the background color setting for the section block it is nested in.
- Text Style – displays just the text of the card’s content with no borders, background, or visual boundaries separating that card from another.
- Card Style – displays the card text within a card shape and includes the option to add an image to background of the card shape. This is the boldest style option.
- Outline Style – displays the card text with a simple outline around it for a subtle differentiation between cards.
Example Cards Block (9 cards)
Card Block
Text Style
Text style with no image.
Card BLock
Text Style
Text style with image

Card Block
Card Style
Card style with no image.
Card Block
Card Style
Card style with image on top.

Card Block
Card Style
Card style with image as background, and overlay set to gray.
Card Block
Card Style
Card style with image as background, and overlay set to white.
Card Block
Card Style
Card style with image as background, and overlay set to blue.
Card Block
Outline Style
Outline style with no image.
Card Block
Outline Style
Outline style with image.

View a live example of the Cards block on the Web Services website.