Skip to main content

Cards block

What is the Cards block for?

Several equal choices in one easy-to-scan block. The Cards block works when visitors should see several options at once: services, topics, recommended content or a curated mix of news and events.

A card can contain custom content or reference an existing page, news item or event. Referenced cards follow the source title, description and image, so a later rename does not have to be copied into the grid manually.

Filled cards — three equal services

A three-column filled layout works well when the options have equal weight and can be compared quickly.

  • Business website

    A complete business website with the main pages and editable content.

  • Campaign page

    A shorter conversion-focused page built around one offer or campaign.

  • Content page

    A structured page for articles, guides or detailed service explanations.

Where can a card come from?

Choose a source separately for each card, so custom and existing content can live in the same grid.

Own

Write the title and description yourself, add your own image and optionally link it somewhere.

News

Select a news item and the card can use its current title, lead, image, date and category.

Event

Select an event and the grid follows its data, including whether the event has already taken place.

Page

Reference an existing page without retyping its title and description.

A reference is not a copy. If the title of a referenced news item, event or page changes later, the card follows it. If you enter your own title or description on the card, that field overrides the source. Referenced content that is not public or no longer available drops out of the public grid.

Bordered cards — four quick choices

With four columns, keep the copy shorter. Borders separate the items without giving each card too much visual weight.

  • Consulting

    Short, focused help with one specific question.

  • Planning

    Align structure, content and visual direction.

  • Implementation

    Build and refine the selected solution.

  • Support

    Help after launch and with later changes.

Plain cards — two strong directions

With two cards, the layout gives each option more room. Plain style works when a separate card frame would add little.

  • New website

    When you are building a new structure from scratch and want to guide visitors through one clear journey.

  • Refresh an existing site

    When the content already exists but the layout, visual hierarchy or conversion points need to be improved.

Four layouts for the same cards

The Layout setting does not change the cards, only how they appear on the page:

  • Grid: the default, equal cards in columns. You can turn it into a row swiped sideways on phones.
  • Paged row: a single row visitors page through with arrows. Good when there are many cards but little space.
  • Featured + grid: the first card is large and the rest sit in a grid beside it. You can set its side, proportion, the number of columns beside it, the large card's style and whether it stays in view while scrolling.
  • Mosaic: image tiles of mixed sizes, in the Magazine, Alternating or Bento view. Works when every card has a good picture.

In the editor, the cards always appear as a grid so they are easy to edit. Check the chosen layout in the preview or on the published page.

Cards block settings in the sidebar: Featured + grid is chosen in the Layout dropdown, followed by the large item's side, proportion, columns beside it, style and the keep-in-view option. On the right, the editor shows the cards as a grid.
The layout is set in the sidebar; in the editor, the cards still appear as a grid.

What can you configure in the Cards block?

From layout and image ratio to referenced-content metadata, the grid can be controlled at several levels.

Layout

Grid, paged row, featured + grid or mosaic. The editor always shows a grid; the page shows the chosen layout.

Columns

Choose Auto, 2, 3 or 4 columns. Auto mode adapts the grid to the number of cards.

Card style

Choose plain, bordered or filled presentation.

Image ratio

Use a consistent 4:3, 1:1, 16:9 or 4:5 ratio across card images.

On a phone, a row swiped sideways

In the Grid layout, cards on a phone become a row swiped sideways instead of one long column.

Date and category

For news and events, show date and category when useful. Custom cards do not gain an extra metadata row.

Order

Reorder cards manually. The grid does not rearrange them automatically by content importance.

Custom override

On referenced content, override the title or description while letting the remaining fields continue to follow the source.

Cards or Stacking cards? If the items have equal weight and visitors can start with any of them, use the Cards block. If the sequence itself is part of the story, choose the Stacking cards block instead.

SEVERAL OPTIONS, ONE SYSTEM

A good card grid makes choosing faster.

Keep titles parallel, descriptions similar in length and the number of visible cards low enough to scan comfortably.