Shop

Grid Card Text Content

A grid card text content component

Overview

The Grid Card Text Content component displays a grid of text-focused cards (e.g. category or content cards) with consistent spacing and alignment. It fits category pages and content sections where text is primary.

Key Business & UX Benefits

One grid for text-heavy cards so category and content sections stay consistent.
Responsive column count fits mobile and desktop.
Consistent spacing and alignment across cards.
Theme-aligned styling for light and dark modes.

Pro-Tip from Larry: Use Grid Card Text Content for category or content grids when cards are text-focused.

Usage

LuiGridCardTextContent

Feature List

Responsive grid for text-focused cards
Configurable column count and spacing
Consistent alignment and typography
Theme-aligned styling

API Reference

Prop	Default	Type
`size`	`l`	`"s" \| "m" \| "l"` Size of the card content - affects text and spacing sizes
`viewportSizes`		`{ s, xs, sm, 4 more }` Specific size overrides for breakpoints
`caption`		`string` Optional caption text displayed at the top
`headline`		`string` Main headline text
`subline`		`string` Secondary subline text
`alignment`	`left`	`"left" \| "right" \| "center"` Text alignment within the card
`cta`		`CtaBannerButton { text, link, size, 3 more }`

Slot	Type
`default`	`{}`

Edit this pageorReport an issue

Grid Card Content

A responsive card grid layout arranging content cards in 3 or 4 column configurations with consistent spacing.

Inpage Navigation Basic Grid

Flexible grid layout for displaying basic category nodes on entry pages with customizable alignment and headings.