Sermona

Blog patterns ​

Long-form posts sit on the content rail (--sermona-layout-max-content). Pair .sermona-post with existing primitives: .sermona-quote, .sermona-media-feature (inline embeds), Iconography lists, and Sections for special bands.

Article (sermona-post) ​

BlockClass
Root.sermona-post
Header band.sermona-post__header — title, deck, meta
Kicker / issue.sermona-post__eyebrow — wrap .sermona-kicker or series
Series label.sermona-series-badge — optional line above title
Title.sermona-post__title
Deck.sermona-post__deck — light subhead
Meta row.sermona-post__meta — date, reading time, etc.
Byline.sermona-post__byline — use <strong> for author name
Cover.sermona-post__cover (+ --bleed for slight breakout when wrapped in padded layout)
Body.sermona-post__body — prose; child spacing uses * + *
Footer.sermona-post__footer — tags, author, CTAs, related

Index & archive ​

.sermona-blog-grid wraps .sermona-blog-card (optionally a.sermona-blog-card). Structure: __media, __body, __meta, __title, __excerpt.

Tags ​

.sermona-tag-row as ul with li → a.sermona-tag (or span.sermona-tag when not linking). Keeps chips on one wrap-friendly row.

Author ​

.sermona-author with img.sermona-author__avatar, .sermona-author__name, .sermona-author__bio.

Prev / next ​

.sermona-post-nav — two a.sermona-post-nav__link cells; __dir (Previous / Next), __title. On ≤600px the grid stacks. Hide one side on first/last post in your template.

Demo: index row ​

Demo: article shell ​

Field notes · Systems

Rhythm beats novelty

When every screen invents spacing from scratch, the brand never lands.

Ada Marin · Editor

18 Apr 2026 · 8 min read

Microphone and warm stage lights

Editorial voice needs predictable gutters, type roles, and one accent story — gold in Sermona — or readers fatigue before the idea lands.

“Systems are choreography: every move should know its beat.”

—Internal design critique

Ship the **post** with semantic headings (`h1` once, `h2` for sections), then layer these classes for presentation.

Covers: Optional sermona-post__cover--bleed breaks out of horizontal padding equal to var(--sermona-space-4) — align with your layout shell or remove for a flush measure.

Accessibility ​

  • One h1 per post; header / footer / nav landmarks as above.
  • Cover img: meaningful alt or empty alt only if the title/deck conveys the same intent.
  • Tag row: aria-label on the ul when links are topics.
  • Prev/next: real href targets; don’t use # in production.

See also ​