CMS

Content Grid

Generic responsive grid for cards, tiles, and other slotted content.

Overview

ContentGrid is a generic responsive grid that lays out any slotted children uniformly. Pass cards, tiles, or arbitrary content through the default slot. The grid handles breakpoints, columns, and gaps; the data source is the caller's responsibility.

Key Business & UX Benefits

A single responsive grid covers card collections, feature rows, and blog excerpt strips, so teams stop forking grid components per use case.
Responsive defaults keep cards aligned on every viewport, removing the broken-grid look that erodes trust on small screens.
A grid that takes any slot content means the same primitive backs hand-curated rows and query-driven rows without per-use-case logic baked into the grid itself.

Usage

ContentGrid Default

<ContentGrid>
    <Card v-for="card in cards" :key="card.id" v-bind="card" />
  </ContentGrid>

Feature List

Generic responsive grid hosts any slotted children: cards, tiles, or arbitrary content, without per-use-case forks
Responsive defaults keep cards aligned on every viewport, avoiding the broken-grid look on small screens
Same grid covers card collections, feature rows, and blog excerpt strips from one configuration

API Reference

Prop	Default	Type
`heading`		`string` Optional heading rendered above the grid.
`headingColor`		`string` Heading color (resolved CSS).
`subline`		`string` Optional subline rendered below the heading.
`sublineColor`		`string` Subline color (resolved CSS).
`backgroundColor`		`string` Background color applied behind the grid of cards.
`textPosition`	`left`	`"center" \| "left" \| "right"` Horizontal alignment of heading/subline.
`cta`		`CtaBannerButton { text, link, size, 3 more }` Optional CTA rendered below the grid.
`buttonAlignment`	`left`	`ContentAlignmentHorizontalFieldValue ("center" \| "left" \| "right")` Horizontal alignment of the CTA beneath the grid.

Slot	Type
`default`	`any` Slot for the individual cards (BlockCard instances or query-driven cards).

Edit this pageorReport an issue

Container

Layout primitive that wraps a backdrop with grid, alignment, and media-sizes configuration.

Editorial Grid

Editorial-style grid of cards with optional featured-card emphasis, driven by a cards array.