Demo: Card block

Card block

The card block displays content in a self-contained card layout. Four layout types are available: card (default), full_background, horizontal_card, and logo.

Fields

Title — card heading
Introduction — short subtitle shown above the body
Body — rich text content
Image — optional card image
Card type — layout variant (card, full_background, horizontal_card, logo)
Button group — optional call-to-action buttons
Theme colours — background and text colour overrides
Block padding — outer spacing (none, xs, sm, normal, lg, xl, xxl, xxxl)

When to use

Use a card block to highlight a specific item, feature, or call to action. Cards work well on their own or as columns inside a row block.

Example 1 — Default card

Card type: card (default). Plain card with title, introduction, and body text. No image, no background colour.

This is the card body. It supports full rich text: paragraphs, bold, italic, links, and lists. An image can be added via the media library to appear at the top of the card, and a button group can be added at the bottom for call-to-action links.

Example 2 — Full background card

Card type: full_background. The image fills the entire card background. Text is overlaid on top with white colour for contrast.

Use this card type when you want the image to dominate and the text to appear as an overlay. Set Content colour to white and choose a high-contrast image.

Example 3 — Horizontal card

Card type: horizontal_card. The image appears to the left and the text content to the right in a side-by-side layout.

Use a horizontal card when you want to combine a thumbnail image with longer text content in a compact layout. Works well in full-width blocks or as a standalone feature item.