Cards

📖 Overview

The Cards block displays a collection of cards in a grid or slider layout. Cards can be added manually or dynamically pulled from content types such as Posts or People. The block supports responsive column layouts and can be converted into a Swiper slider.

✏️ Content Options

Field	Type	Required	Description
Enter cards manually or pull content?	Select	Yes	Choose between Manual entry or pulling from Content

Manual Mode

Cards are managed via a repeater field. Each card renders the Card component with the following fields:

Field	Type	Required	Description
Image	Image	No	Card image (recommended: 700x394px)
Eyebrow	Text	No	Small text displayed above the title
Title	Text	Yes	The card heading
Description	Textarea	No	Short description text
Button Link	Link	No	Optional call-to-action button
Button Style	Select	No	Visual style for the button
Button Icon	Select	No	Optional icon for the button

Content Mode

When pulling from content, the following options are available. If pulling People, the CardPerson component is used instead of the standard Card.

Field	Type	Description
Content to pull	Select	Choose between Posts or People
Select content manually or via query?	Select	Choose Query (automatic) or Manual selection
Number of posts	Number	How many posts to display (Query mode only)
Order By	Select	Order by Date or Title (Query mode only)
Related Category	Taxonomy	Filter by category (Query mode only)
Select Posts/People	Relationship	Manually select specific posts (Manual mode only)

⚙️ Settings Options

Setting	Type	Default	Description
Convert to slider?	Toggle	Off	Display cards in a Swiper slider instead of a grid
Columns	Select	3	Number of columns (1-4). Only visible when not a slider
Justify Center	Toggle	Off	Center the cards within the block. Only visible when not a slider
Set slides per view automatically?	Toggle	Off	Base slides per view on slide widths rather than fixed number (Slider only)
Slides Per View (Desktop)	Select	3	Number of slides visible on desktop (Slider only)
Slides Per View (Tablet)	Select	2	Number of slides visible on tablet (Slider only)
Slides Per View (Mobile)	Select	1	Number of slides visible on mobile (Slider only)
Show Overflow?	Toggle	Off	Show cards that overflow the slider container (Slider only)
Make Whole Card Clickable?	Toggle	Off	Make the entire card clickable using the button link
Make the card “featured” style?	Toggle	Off	This left aligns the image, making the card a full row

🎨 CSS Variables

The following CSS variables can be configured to customise the block’s appearance:

Variable	Default Value
`--block-cards-gap-row`	`var(--grid-gap-row)`
`--block-cards-gap-column`	`var(--grid-gap-column)`
`--block-cards-gap-row-mobile`	`var(--grid-gap-row)`
`--block-cards-gap-column-mobile`	`var(--grid-gap-column)`
`--block-cards-slide-auto-width`	`400px`

Card Component CSS Variables

Each card uses the Card component, which has the following CSS variables:

Variable	Default Value
`--component-card-background`	`var(--colour-white)`
`--component-card-border-width`	`1px`
`--component-card-border-colour`	`var(--colour-black)`
`--component-card-border-radius`	`var(--radius-card)`
`--component-card-shadow`	`var(--shadow-card)`
`--component-card-padding`	`var(--spacing-xs)`
`--component-card-content-gap`	`var(--spacing-xxs)`

Card Person Component CSS Variables

When pulling People content, the CardPerson component is used instead, which has the following CSS variables:

Variable	Default Value
`--component-card-person-gap`	`var(--spacing-xxs)`
`--component-card-person-img-aspect-ratio`	`1/1`
`--component-card-person-title-gap`	`var(--spacing-xxxs)`

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Link

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Link

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Link

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Link

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Link

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Link

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Link

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Link

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Link

Description

Desc

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Link

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero.

Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

No results found matching your criteria

Title

Title

Title

Title

Title

Title

Cards

📖 Overview

✏️ Content Options

Manual Mode

Content Mode

⚙️ Settings Options

🎨 CSS Variables

Card Component CSS Variables

Card Person Component CSS Variables

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Article 4

Article 3

Article 2