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.
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.
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)
Text style with no image.
Text style with image
Card style with no image.
Card style with image on top.
Card style with image as background, and overlay set to gray.
Card style with image as background, and overlay set to white.
Card style with image as background, and overlay set to blue.
Outline style with no image.
Outline style with image.