Blog Styleguide

Type to search...

to open search from anywhere

Blog components

The real Margin Notes component pack, with articles, author pages, comments, and newsletter interactions.

24 components

Chrome

Footer

Hairline top rule, footer nav, small print and the credit link.

3 variants

Header

Hairline-ruled header with the serif wordmark and sans nav; the current item gets the accent underline.

3 variants

Nav link

Navigation link; inside the header it is marked current when its href prefixes the page path.

3 variants

Layout

Container

Centred width: the 64rem page or the 38rem reading measure.

3 variants

Home hero

Display line and lead with one inline prose link.

3 variants

Page heading

Page h1 with eyebrow and intro at the reading measure.

3 variants

Section

Section-gap wrapper with an optional top hairline.

3 variants

Section heading

Small serif heading with an optional eyebrow.

3 variants

Stack

Vertical stack on the vsp ladder.

3 variants

Content

Callout

Accent-soft or surface box with a title and short markdown.

3 variants

Demo note

States that the page's forms are mocks.

3 variants

Articles

Article card

Hairline-ruled entry: cover, date · tag, title, intro. Hides itself when its list's tag filter or route rule excludes it.

3 variants

Article header

Eyebrow, title, intro, byline with avatar, date and reading time, then the full-width cover.

3 variants

Article list

Hosts article cards in 1–3 columns; optional tag chips filter them, and the mode adds a route rule every card applies.

4 variants

Author card

Avatar, name, bio and link; the hero variant heads an author page.

3 variants

Author grid

Hosts author cards.

3 variants

Avatar

Small round byline avatar for the article header.

3 variants

Prose body

Markdown at the reading measure; optional accent drop cap on the first paragraph.

3 variants

Related articles

One row of up to `limit` article cards, hiding the card for the current page.

3 variants

Tag list

Caption tags linking to their tag pages; empty tags are skipped.

3 variants

Comments

Comment

Name, date and body; inside a comment list it hides unless its article slug matches the page.

3 variants

Comment form

Mock form: validates, waits 600 ms, then adds the comment to this page's list locally.

3 variants

Comment list

Prefilled comments for this page, then any posted locally from the comment form this session.

3 variants

Newsletter

Mock email sign-up at the reading measure.

3 variants