Skip to content
Reed Docs

Layout and surfaces

Cards, grids, frames, panels, banners and accordions.

Ten components for arranging content on the page.

Card

Section titled “Card”
titlestringrequired

The card’s heading.

hrefstring

Makes the whole card a link. Root-relative values must include your base prefix — Reed does not add it to component attributes.

descriptionstring

Short supporting line. Body children work too.

iconicon

Icon shown with the title.

imgstring

Image path rendered as the card’s media.

ctastring

Call-to-action label.

horizontalbooleandefault: false

Lays the card out horizontally.

arrowbooleandefault: false

Shows a trailing arrow affordance.

CardGroup

Section titled “CardGroup”
cols1 | 2 | 3 | 4default: 2

Column count.

Children: Card only, at least one. Anything else is a diagnostic, so a stray paragraph between cards fails the check rather than rendering into a broken grid.

mdx
<CardGroup cols={2}>
  <Card title="Quickstart" href="/docs/quickstart">Five minutes to a deployable site.</Card>
  <Card title="CLI" href="/docs/reference/cli/build">Every command and flag.</Card>
</CardGroup>

Columns and Tiles

Section titled “Columns and Tiles”

Both take cols (1–4) and accept rich children. Columns defaults to 2 and is for side-by-side prose; Tiles defaults to 3 and is for denser, more uniform blocks. Neither restricts what goes inside.

Frame

Section titled “Frame”
captionstring

Caption rendered after the framed content.

hintstring

Hint rendered before the framed content.

Children: rich, at least one. hint comes first, then the media, then caption — the order is fixed so screenshots and diagrams read consistently across a site.

Panel and Aside

Section titled “Panel and Aside”

Panel is a plain surface: no props, rich children. Aside is a sticky right-rail surface, also propless. Use Aside for context that should stay visible while the reader scrolls the main column.

Section titled “Banner”
dismissiblebooleandefault: false

Lets the reader close the banner.

Children: inline content only — a banner is one line, not a container.

Accordion and AccordionGroup

Section titled “Accordion and AccordionGroup”
titlestringrequired

The always-visible summary line.

descriptionstring

Secondary line under the title.

defaultOpenbooleandefault: false

Renders expanded.

idstring

Stable anchor for deep links.

iconicon

Icon beside the title.

AccordionGroup takes no props and accepts Accordion children only, at least one.

Content inside a closed accordion is still in the page and still indexed by search — it is hidden, not excluded. Do not use one to hide something a reader must not miss.