Skip to content
PutlerPutlerSearch

Layout

Blocks that arrange things: cards, columns, widths, and the sidebar.

Widths

Use when: Four content widths across reading and breakout tracks.

:::note
Normal width follows the central reading column.
:::

Normal: 68ch text column

Wide: breaks out +12rem

Wider: aligns to sidebar edge

Full: edge to edge screen

Content width hierarchy
Do and don't

Do: reserve wide and full widths for visual media and complex tables. Don’t: widen plain prose paragraphs, which makes reading harder.

Link cards

Use when: Visual grids of links to related posts or external resources.

Speed Up Checkout

Tested fixes from real stores.

Email Templates

10 high-converting templates.

Cart Recovery

Automated workflows.

:::cards
- [Speed Up Checkout](/checkout/): Tested fixes from real stores.
- [Email Templates](/emails/): 10 high-converting templates.
- [Cart Recovery](/recovery/): Automated workflows.
:::

A card shows its picture, else its icon, else the grid’s icon. {hero} makes a lead card; badge is a pill in the corner (a plan, a status), meta a quiet line at the foot (a count, a date). How many cards share a row follows the width the grid gets, not the screen.

Do and don't

Do: write short, punchy descriptions for each card. Don’t: mark every card {hero}: leads work because they are few.

Card lists from the site

Use when: A list of links the build fills in: this page's children, related posts, a topic, a tag, the newest posts.

::cards{from="children" wider}

You say where the cards come from; the build writes them, so the list never goes stale. from takes children (a hub’s own pages: a topic’s sub-topics and posts, a section’s pages, a docs category’s articles), related (what Continue reading would pick, as its bento), latest, featured, category/<slug>, tag/<slug>, topics or topics/<parent>, and pages/<section>. limit caps it; the width words work as everywhere else.

How the cards are arranged is not yours to set: pictures get the lead cards, spread through a long list; the last row is kept full; one card stays one card wide. Topics without a picture become a compact index, not boxes.

Do and don't

Do: pick the width for where the list sits - {wider} for a hub, the text column for a short list inside an article. Don’t: copy a list of posts by hand when from can keep it current.

Columns

Use when: Multi-column layouts for side-by-side content.

Self-hosted

Complete privacy and control over your customer database.

Cloud managed

Automated backups and zero server maintenance required.

::::row
:::col
### Self-hosted
Complete privacy and control over your customer database.
:::
:::col
### Cloud managed
Automated backups and zero server maintenance required.
:::
::::
Do and don't

Do: use for comparing two distinct concepts or plans. Don’t: cram complex tables or long prose into narrow columns.

Use when: Place notes and figures in the sidebar track beside text.

:::note{side}
A quiet reference note in the sidebar.
:::
Do and don't

Do: place right next to the paragraph it relates to. Don’t: stack multiple sidebar elements adjacent to each other.