Heading one

Heading two

Heading three

Heading four

Text

Body copy sits at the reading measure the issue pages use. It carries bold and italic emphasis, inline code, and links that pick up the accent colour.

Quotes

A smaller list that gets opened is worth more than a big one that gets ignored.

Lists

Unordered items wrap against a hanging indent
Spacing matches the body rhythm
Nesting is styled two levels deep

Numbered lists share the same measure
The counter sits outside the text column
Long items stay aligned

Tables

A table scrolls inside its own frame when a narrow screen cannot hold it, so it never drags the page sideways.

Metric	Template	Near-plain
Open rate	41.2%	43.8%
Click rate	3.1%	4.9%
Replies per issue	6	19

Code

A fenced block is highlighted at build time, with one set of colours for each mode and no highlighter shipped to the reader.

<body style="margin: 0; padding: 24px 16px; background: #fff">
  <div style="max-width: 560px; margin: 0 auto; font: 16px/1.6 system-ui, sans-serif">
    <!-- the issue -->
  </div>
</body>

Pictures

A regular figure sits at the width of the reading column.

A gradient of blue, cyan and lilac — Regular width. Click it to open the lightbox. Photo by Codioful

A wide figure breaks out of the column to a comfortable picture width.

A soft gradient of cream, peach and coral — Wide. Photo by Codioful

Callouts

Toggles

A toggle hides detail until it is asked for

Useful for a long caveat, a worked example, or the answer to a question only some subscribers have.

Several can sit together as a short FAQ

Each one opens on its own, so a reader can take only the part they came for.

Bookmarks

A bookmark only needs a URL. The picture, the title and the description are read from the linked page's own Open Graph tags at build time, and a page that has none falls back to a plain card.

AstroAstro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.Astro