Feature grid

FeatureGrid is Exquisitus’s own layout component, a deliberate alternative to CardGrid’s uniform grid. It wraps Starlight’s <Card> components, so each icon keeps its cycling tint, and the first child always leads. Two arrangements are available via the layout prop.

Import

import { Card } from '@astrojs/starlight/components';
import FeatureGrid from 'starlight-theme-exquisitus/components/FeatureGrid.astro';

Lead layout

The default. A full-width thesis card spans the top row, followed by supporting peers that auto-fit the count; two cards become halves, three become thirds, four become quarters. The author drops in however many fit the argument, with no breakpoints nor extra props required.

The thesis

The lead card spans the full width, carrying the one idea everything else supports.

Left support

Two supporting cards divide the row equally for a wider, more editorial feel than thirds.

Right support

In a narrow container the whole grid folds to a single readable column.

The same auto-fit logic extends to three or four supporting cards, which become thirds or quarters automatically. Those wider arrangements need an unconstrained container to breathe (a splash page, no sidebar), so they aren’t shown here.

Alternating layout

An editorial zigzag. The wider card (three of five columns) flips side each row, so a sequence of features reads with the rhythm of a magazine spread. A lone trailing card takes the full width rather than leaving a ragged gap.

Opens wide

The first card takes three of five columns; the wider cell on the opening row.

Narrow counterpoint

Its partner takes the remaining two. The asymmetry gives the pair energy.

The flip

On the next row the emphasis reverses. It’s narrow first, then wide. The eye moves across the page.

Wide again

The pairing closes the rhythm out, even on a two-row spread. Five tracks, always full.

Props

Prop	Type	Default	Description
layout	'lead' | 'alternating'	'lead'	Grid arrangement.
class	string	-	Additional CSS class names.

The component accepts a default slot containing Starlight <Card> elements.

Both arrangements are gated on the width of the grid’s own container, not the window. A container narrower than 34rem folds to a single readable column however wide the screen is. Each card’s title is sized from the cell it lands in, so a grid dropped into a sidebar column stays composed instead of spilling its headings.