Blog list

Post cards in a grid, or one featured post above the grid.

Last updated October 15, 2026

Blog

From the blog

Notes on building the system.

Designing sections that editors can fill
Props for the common case, slots for the rest. How we drew the line.
AL
Ada LovelaceOct 2, 2026
Zero JavaScript until it earns its place
Why every section renders without a runtime, and what the islands are for.
AT
Alan TuringSep 18, 2026
Contrast as a build gate
The script that fails the build when a colour pair drops under AA.
GH
Grace HopperSep 4, 2026
Right to left, by default
Logical properties everywhere, and the one page that proves it.

Show code

<BlogList heading="From the blog" items={[{ title, excerpt, href, image?, date, author? }, …]} />

npx @ava-ui/apogee add blog-list

Prop	Type	Default	Category	Description
`eyebrow`, `heading`, `description`	`string`	—	content	Optional header.
`items`	`{ title, excerpt, href, image?, date, author? }[]`	—	content	Required. `date` is an ISO string, rendered in a `<time>`.
`label`	`string`	English	content	Landmark name when there is no heading.
`locale`	`string`	page locale or `'en'`	content	Date formatting locale.
`layout`	`'grid' \| 'featured'`	`'grid'`	layout	`featured` shows the first post full width.
`align`	`'start' \| 'center'`	`'start'`	layout	Header alignment.
`background`, `spacing`, `headingLevel`, `id`			layout	As on every section.

Props for the common case, slots for the rest. How we drew the line.

Ada LovelaceOct 2, 2026

Zero JavaScript until it earns its place
Why every section renders without a runtime, and what the islands are for.
AT
Alan TuringSep 18, 2026
Contrast as a build gate
The script that fails the build when a colour pair drops under AA.
GH
Grace HopperSep 4, 2026
Right to left, by default
Logical properties everywhere, and the one page that proves it.

Show code

<BlogList layout="featured" items={…} />

Each card is an article; the title is the link and the whole card is its hit area.
Dates are <time datetime> elements.