Editorial/marketing layout blocks: compare columns, data heroes, editorial spreads, features, info and message panels, metric strips, split panels, status boards, and text reveals.
10 blocks · 25 variants
Compare Columns
compareColumns
Two labeled side-by-side columns for "A vs B" comparisons; the positive column receives an accent treatment.
Default
Two labeled comparison columns on a banded section.
default
Legacy Email Platform
Pricing tiers that punish list growth, not sends
Drag-and-drop builder that renders differently in every inbox
Automation locked behind a "Pro" upsell wall
Support tickets take days; live chat is a bot
Six months to find where anything lives in the dashboard
Postbox
Flat $15/mo Solo plan — no per-subscriber penalty
98.6% inbox placement, tested against every major provider
Automation included on every plan, starting at Solo
Founder Jordan Vance answers support email personally
Built for creators and small teams, not enterprise procurement
Data Hero
data-hero
Hero section with overlay metadata fields and data display
Default
Light solid background with overlay metadata fields — SITREPHERO1 layout.
default
PUBLIC2B+ Events Tracked Monthly
Analytics Built For Product Teams, Not Marketers.
Lumen powers 1,400+ product teams with 99.97% uptime and 84ms p50 API response — so the dashboard is never the bottleneck between you and the answer.
Full-bleed banded section with a narrow metadata rail (left or right) beside a main content column. Sequence these with alternating appearance to produce the editorial F-system rhythm.
Rail Left
Default editorial spread; metadata rail on the left marginalia track beside the reading column.
rail-left
01Field Report
Four days on the Wind River High Route with the Ridgeline 45L and the Switchback 2P — what stayed dry, what wore through, and what earned its place in the pack for good.
42 mi
Distance
11,200 ft
Elevation gain
4 days
Duration
Rail Right
Rail on the right marginalia track; alternate side to build the F-rhythm.
rail-right
02Gear Notes
The Talus softshell went through three Montana seasons before we retired it — not because it failed, but because we wanted to see how far the lifetime warranty would actually hold.
3 seasons
Field tested
0
Warranty claims
Rail Top (Running Head)
Rail becomes a horizontal running head above a full-width main column.
rail-top
03Chapter 3
Above treeline with the Cairn poles — a running head for the section on exposed ridge travel.
10,400 ft
Ridge elevation
Dual Marginalia
Left rail = structural (index/mini-nav/progress), right rail = referential (footnotes/asides); column flexes between.
rail-both
04Deep Dive
How Meridian tests hard goods before they reach the 300 independent outfitters that stock them.
300+
Outfitters stocked
No-Rail Emphasis
Rail suppressed; a single centered statement band for a moment that earns it.
emphasis
Feature
feature
Versatile feature showcase with USP cards, images, metrics, and multiple layout variants.
Wing Grid
Image with USP card grid — FEATURE_COP1 layout.
default
Why Product Teams Choose Lumen
Lumen gives you event tracking, funnels, and session replay in one place — so you can watch the moment users click, not guess at it from a spreadsheet.
Event Tracking That Just Works
Drop in one snippet and Lumen starts tracking clicks, pageviews, and custom events automatically — no schema to define upfront.
Funnels Without The Guesswork
Build a funnel in minutes and see exactly where users drop off, segmented by any property you track.
Session Replay, Not Just Numbers
Watch the actual session behind a drop-off. Lumen pairs every funnel with replay so the "why" is one click away.
Lumen gives you event tracking, funnels, and session replay in one place — so you can watch the moment users click, not guess at it from a spreadsheet.
Event Tracking That Just Works
Drop in one snippet and Lumen starts tracking clicks, pageviews, and custom events automatically — no schema to define upfront.
Funnels Without The Guesswork
Build a funnel in minutes and see exactly where users drop off, segmented by any property you track.
Session Replay, Not Just Numbers
Watch the actual session behind a drop-off. Lumen pairs every funnel with replay so the "why" is one click away.
Numbered stop cards — mono counter, serif stop title, body, and a real route link. Even stops sit staggered lower; cards lift on hover; scroll-reveals via the shared Reveal wrapper.
walk-strip
The Route
Four stops between "we talked" and "it shipped." Every one of them is a real link, not a promise.
01
Discovery Call
Thirty minutes, no deck. We figure out if this is a fit before either of us spends real time on it.
Ink full-bleed stat band — serif numerals with an accent superscript, mono uppercase labels over hairline rules, and a ruled honesty-note row. Seed with columnSpan '1 / -1' for full bleed.
ledger-dark
The Numbers
Every figure below is pulled from live account data, not a media kit.
96free
Percent of sessions replayed without a sampling cap.
2.1s
Median time from event fired to dashboard update.
169
Customers who moved off a spreadsheet in the last 90 days.
We round down, never up — if a number here is wrong, it is wrong in your favor.
Info Panel
info-panel
Prose content with key-facts sidebar panel and optional sticky behavior
Default
Structured info panel with label-value pairs and optional status indicator.
default
ORIGIN · SOURCING
Founded by Marcus Webb in 2017, Copperline roasts every batch by hand in 40lb runs at our Asheville roastery — small enough that we taste every lot before it goes wholesale.
Dark
Dark surface info panel with accent border and monospaced label typography.
dark
OUR SOURCING
Copperline works directly with six origin farms across three countries, paying well above commodity fair-trade floors — because the roast is only as good as what grows before we ever touch it.
Message Panel
message-panel
Styled message callout with priority level, source attribution, and timestamp
Default
Message or callout panel with optional icon, heading, and body.
default
WARNINGSUBMISSIONS NOTICE
Pitches for Issue No. 15 close September 1. We are looking for essays on objects that outlive their function — read the full call before you send.
SOURCE Alex Okonjo, Contributing WriterCHANNEL Submissions
Minimal
Borderless message block with large typographic callout — no card surface.
minimal
INFOMESSAGE
Issue No. 14 ships to subscribers the first week of August. This one is about the objects we almost threw away — and the ones we wish we had.
Horizontal metrics display with labeled values, deltas, and optional summary prose
Default
Horizontal metric strip with per-metric accent colors and delta indicators.
default
Lumen Customer Metrics — Q2 2026
PRODUCT TEAMS▲1,412Active workspaces
EVENTS TRACKED▲2.1BMonthly volume
REPLAY LOAD TIME▼310 msp50
NPS SCORE68Promoter score
MONTHLY CHURN▼1.4 %Logo churn
Product-team adoption grew again in Q2, led by teams migrating off spreadsheet-based funnel tracking. Logo churn dropped to 1.4%, the lowest since Lumen launched the Scale plan.
Dark
Dark surface metric strip with glowing accent values.
dark
Lumen Platform Status — Live
UPTIME99.97 %12-month rolling
API LATENCY▼84 msp50, global
EVENTS TRACKED▲2.1BTrailing 30 days
OPEN INCIDENTS0Severity 1–2
All systems operating within normal parameters across every region. No Severity 1 or 2 incidents in the trailing 12-month window.
Split Panel
split-panel
Split layout with image, body text, and optional data sidebar
Default
Split panel with configurable left and right content zones.
default
On LocationAtlas Motion / Beckett Cho
Case Study
A six-part brand-film series for a client who needed motion, not just a logo. "Signal" shows how Atlas Motion builds a visual language frame by frame, from storyboard to final color.
Dark surface split panel with accent divider line.
dark
Behind The Scenes
Eighteen months following a fishing crew through the collapse of a coastal economy — this is how "Low Tide" went from a two-person crew to a Vimeo Staff Pick.
Scroll-triggered word-by-word text reveal animation with configurable max width.
Default
Animated text reveal with scroll-triggered entrance and optional eyebrow.
default
OUR PHILOSOPHY
A house that ignores its site is a house that will always feel like a stranger there. Harbor & Pine starts with the land — the way morning light crosses a lot, the grade of a slope, the trees worth keeping — and lets the building answer to what it finds.
Dark
Dark surface text reveal with accent color highlight on key phrases.
dark
ON SITE
We do not design buildings and then find them a site. The site tells us what the building should be — the slope, the light, the trees we refuse to cut down. Every material choice answers back to where the building stands.