card() builds a single card; cards() wraps any number of them in the Plumest-style responsive grid.

Grid

Three cards in a grid

Markdown authoring

Write docs in plain Markdown.

Component gallery

Every kit builder, live.

Design tokens

The single source of truth.

cards([
  { title: 'Markdown authoring', description: 'Write docs in plain Markdown.', href: '/guides/example/', icon: 'lucide:file-text' },
  { title: 'Component gallery', description: 'Every kit builder, live.', href: '/contribution/components/', icon: 'lucide:zap' },
  { title: 'Design tokens', description: 'The single source of truth.', href: '/contribution/styles/', icon: 'lucide:palette' },
]);

Single card states

Link card

Getting started

A card that links somewhere.

Card without icon

Plain card

No icon, no link — a bare block.

Extra HTML content inside.

External link card

Plumest

External links open in a new tab.

card({ title: 'Getting started', description: 'A card that links somewhere.', href: '/guides/example/', icon: 'lucide:arrow-right' });
card({ title: 'Plain card', description: 'No icon, no link — a bare block.', children: '<p>Extra HTML content inside.</p>' });
card({ title: 'Plumest', description: 'External links open in a new tab.', href: 'https://github.com/CelPlume/CelestPlume', external: true, icon: 'lucide:external-link' });

Props

Option	Type	Default	Description
title	string	—	Card title (required).
description	string	''	Supporting text.
href	string	''	Target URL — with it the card renders as an <a>.
external	boolean	false	Opens the link in a new tab.
icon	string	''	Iconify name (e.g. lucide:zap) or raw SVG.
children	string	''	Extra HTML below the description.

Notes

• Icons resolve via the project’s local @iconify-json sets — never fetched from the Iconify API at runtime.
• cards() accepts an array of CardOptions or a single pre-built HTML string.