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) |
Eyebrow
Title
Desc
Title
Description
Title
Desc
Eyebrow
Title
Eyebrow
Title
Desc
Title
Description
Title
Desc
Eyebrow
Title
Desc
Title
Description
Eyebrow
Title
Desc
Eyebrow
Title
Desc
Title
Description
Eyebrow
Title
Eyebrow
Title
Desc
Title
Description
Eyebrow
