---
title: Layout and surfaces
description: Cards, grids, frames, panels, banners and accordions.
---

Ten components for arranging content on the page.

## `Card`

<ParamField name="title" type="string" required>
  The card's heading.
</ParamField>

<ParamField name="href" type="string">
  Makes the whole card a link. Root-relative values must include your `base` prefix —
  Reed does not add it to component attributes.
</ParamField>

<ParamField name="description" type="string">
  Short supporting line. Body children work too.
</ParamField>

<ParamField name="icon" type="icon">
  Icon shown with the title.
</ParamField>

<ParamField name="img" type="string">
  Image path rendered as the card's media.
</ParamField>

<ParamField name="cta" type="string">
  Call-to-action label.
</ParamField>

<ParamField name="horizontal" type="boolean" default="false">
  Lays the card out horizontally.
</ParamField>

<ParamField name="arrow" type="boolean" default="false">
  Shows a trailing arrow affordance.
</ParamField>

## `CardGroup`

<ParamField name="cols" type='1 | 2 | 3 | 4' default="2">
  Column count.
</ParamField>

**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`

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`

<ParamField name="caption" type="string">
  Caption rendered after the framed content.
</ParamField>

<ParamField name="hint" type="string">
  Hint rendered before the framed content.
</ParamField>

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`

`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.

## `Banner`

<ParamField name="dismissible" type="boolean" default="false">
  Lets the reader close the banner.
</ParamField>

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

## `Accordion` and `AccordionGroup`

<ParamField name="title" type="string" required>
  The always-visible summary line.
</ParamField>

<ParamField name="description" type="string">
  Secondary line under the title.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Renders expanded.
</ParamField>

<ParamField name="id" type="string">
  Stable anchor for deep links.
</ParamField>

<ParamField name="icon" type="icon">
  Icon beside the title.
</ParamField>

`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.