Skip to main content

Editorial Sections

Editorial sections tell your brand story. They lean on large type, pinned statements, and scroll-driven motion rather than product grids, so they suit About pages, campaign landing pages, and the narrative parts of a home page. Ronin includes 9 editorial sections. All of them share the universal width, color scheme, background, and padding controls described in Section Settings.

Heading highlights

Most editorial sections use the shared heading controls. Accent the italic word tints the italic word in the heading with your primary color, and Highlight style (Box, Highlighter, or Underline) applies to a word you wrap in [square brackets].

About story​

An origin story for your About page: a large product cutout, a centered heading, then a narrow prose column with a lead line, body copy, and a signature.

section-about-story.webp

Features:

  • Image with alt text, contained so it is never cropped (a transparent cutout works best)
  • Overline, heading, heading size, and alignment, with italic accent and highlight style
  • Lead line set larger than the body copy
  • Rich-text body and a signature sign-off

Statement​

A pinned manifesto whose lines fill from dim to bright one after another as you scroll, top to bottom.

section-statement.webp

Features:

  • Eyebrow above the statement
  • Up to 8 lines, each lighting up in turn on scroll
  • Wrap a word in bold to give it the highlight slab
  • Button with label, style, size, URL, and new-tab option
  • Blocks: Line

Statement punch-in​

A pinned two-line statement over a background video. Each word, the two framed tiles, the eyebrow, and the proof line scale down, sharpen, and fade in as you scroll.

section-statement-punch-in.webp

Features:

  • Eyebrow, top line, bottom line, and proof line
  • Each word of the top line punches in on scroll
  • Wrap a word of the bottom line in bold to give it the accent slab
  • Two framed tile images
  • Background video (uploaded video or video URL) with overlay opacity
  • On mobile the statement shows fully assembled, without motion

Quote switcher​

One large pull-quote at a time over an oversized quote mark. Visitors switch quotes by clicking a person's name.

section-quote-switcher.webp

Features:

  • Overline above the quotes
  • Up to 8 quotes, each with the quote, a name, and a role
  • Names act as tabs, with an underline on the active one
  • Blocks: Quote

Program​

A bento grid that introduces a program or service. The heading and a lead paragraph each take two columns, and square cards flow around them in a staggered second row.

section-program.webp

Features:

  • Overline, heading, heading size, and alignment, with italic accent and highlight style
  • Lead text beside the heading
  • Button with label, style, size, URL, and new-tab option
  • Up to 8 cards, numbered automatically by order
  • Each card has a title and either a built-in icon (15 choices, such as Megaphone, Map pin, Shield, Package, and Shirt) or your own icon image
  • Cards fade up in sequence and lift on hover
  • Blocks: Card

Process (sticky)​

A "how it's made" story told on scroll. On desktop a full-height image column stays pinned on the left and crossfades between shots while the steps slide in on the right.

section-process-sticky.webp

Features:

  • Overline, heading, intro, heading size, and alignment, with italic accent and highlight style
  • Up to 6 steps, each with an image, alt text, heading, and text
  • Each step's image crossfades in as its text slides into view
  • On mobile each step shows its own image above the text
  • Blocks: Step

Promo countdown​

A promotional bento: a heading next to a live countdown card, with a feature image, an image tile, and a call-to-action tile below.

section-promo-countdown.webp

Features:

  • Overline, heading, heading size, and alignment, with italic accent and highlight style
  • Timer label and deadline (for example 2026-12-31 23:59)
  • When the deadline is empty, the timer counts down 7 days from each visit
  • Feature image with a circular seal (top text, value, bottom text); leave the seal value empty to hide it
  • Shop image with alt text
  • Call-to-action button with label, style, size, URL, and new-tab option

An oversized text menu beside a full-bleed feature photo with a rotating badge. Use it as a visual shortcut to your main collections or pages.

section-nav-feature.webp

Features:

  • Up to 8 links, each with a label and URL
  • Each link reveals an arrow on hover
  • Feature image in the side panel
  • Badge label repeats around a rotating circular badge; leave it blank to hide the badge
  • Badge link
  • Blocks: Link

Photo shrink promo​

A sticky call-to-action stage. A photo starts full-screen and shrinks into a small tilted square as you scroll, settling above a heading, text, and button.

section-photo-shrink-cta.webp

Features:

  • Overline, heading, heading size, and alignment, with italic accent and highlight style
  • Rich-text copy under the heading
  • Button with label, style, size, URL, and new-tab option
  • Image with alt text that shrinks on scroll
  • On mobile the shrink is replaced by a small tilted photo above the content
Composing a brand story

For an About page, pair About story with the practical sections in Content Sections and finish with Program. On a home page, use Statement or Statement punch-in as a bold break between product sections, Quote switcher for founder or designer voices, and Process (sticky) to explain how your product is made. Reach for Promo countdown during a sale, and close a page with Nav feature or Photo shrink promo to send visitors onward.