Cards Block

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

wordpress image

Card Block

Card Style

Card style with no image.

Card Block

Card Style

Card style with image on top.

wordpress image

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.

wordpress image

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