Manual Cards

Manual cards by default show placeholder blocks for the image, title, description and buttons. If any of these blocks are not going to be used, they must be deleted. The cards do have some default settings in place for the paragraph and button sizes, but these can be manually adjusted as needed. A image size size has been created called ‘Card Default’. One caveat with the image is that the editor will need to change sizes and change back to card default to have it display correctly in the editor. The editor can also choose from a few other sizes as well as manually set sizing or set aspect ratios – these are defaults to the core image block. Note that if an image size is not displaying in the selection list it is because it wasn’t large enough on upload to fit the sizing specifications.

By selecting the parent Card block there is also the option to change the style to the Overlay Style. The editor styles are a bit different than the front-end output because overlays and the editing experience don’t work well together. For this style it is recommended to use a background color as well as centering all text. The Overlay card is also a variation, which means when adding a new card into the card grid, Card Overlay will be an option to choose from. This automatically sets it to the Overlay style and adds the blue background, centers the text and changes the button style to use the white outline version.

Manual Card Example (heading level 3)

This example uses the option description text (paragraph w/small typography variant)

Card Button (optional)

Manual Card with Overlay Style

Can have description, but not recommended.

Button

Dynamic Cards

This example is individual dynamic cards in a card grid. This allows for more curated content, but still taking advantage of the ability to dynamically pull in pages/posts. Dynamic cards are also a card variant, meaning that if a new card is added to the card grid, this will be an option for selecting.

Individual Dynamic cards each have their own display settings for Use Post Featured Image or select Custom, Show Post Title, Show Date, Show Excerpt, Show Terms (when applicable). The example below has all settings enabled.

Icon Cards

Intended for use with SVG icon updloads.