SECTION
Hero
Your opening statement, with something beside it. Two columns that become one without a breakpoint in sight.
Statement, lede, two actions
I build the software that other people build things in.
Editors, canvases, design systems and the awkward parts in between. I take a product from a rough drawing to a shipped interface without handing it across three teams on the way.
<section class="hero shell">
<div class="hero-body">
<div class="section-head">
<span class="section-head-kicker section-head-kicker-quiet">DESIGN ENGINEER · TOOLS & INTERFACES</span>
<span class="section-head-rule"></span>
</div>
<h1 class="hero-title">I build the software that other people build things in.</h1>
<p class="hero-lede">Editors, canvases, design systems and the awkward parts in between. I take a product from a rough drawing to a shipped interface without handing it across three teams on the way.</p>
<div class="cluster hero-actions">
<a href="#" class="btn btn-primary">START A PROJECT</a>
<a href="#" class="hero-link">See selected work</a>
</div>
</div>
<div class="hero-aside">
<svg viewBox="0 0 120 120" aria-hidden="true">
<g fill="none" stroke="var(--ds-ink)" stroke-width="5" stroke-linejoin="round">
<path d="M66 24 L90 24 L90 48 L66 48 Z"></path>
<path d="M42 48 L90 48 L90 72 L42 72 Z"></path>
<path d="M18 72 L90 72 L90 96 L18 96 Z"></path>
</g>
</svg>
<span class="hero-divider"></span>
<span class="hero-status">AVAILABLE FROM OCTOBER</span>
</div>
</section>Which side, and which order
.hero-aside-lead takes the last column, whatever the count — grid-column: -2 / -1 is the final track whether the grid made one or two. So an aside written first in the markup still sits to the right where there is room, and leads only once the hero has stacked. On a phone a mark arriving before the headline reads more naturally than a headline arriving before a mark nobody has seen yet. It is a modifier and not the default, because a hero that writes its aside second — every existing one — should go on placing it exactly where it always did.
It needed no third container query to say that, which is the part worth keeping: this system has two thresholds and both are named. Narrow the window on the specimen below and watch the mark move from the right-hand column to the top of the stack, with nothing measuring the window to decide it.
.hero-aside-center levels it with the body rather than with the top of it. The base case stays start, which is what an aside carrying a tall photograph wants; this is for the small mark-and-status shape, where hanging from the top leaves it looking dropped rather than placed.
Aside written first, centred, and the status as a link
I build the software that other people build things in.
Written first in the markup, and still on the right where there is room — it leads only once the hero has stacked.
<section class="hero shell">
<div class="hero-aside hero-aside-lead hero-aside-center">
<svg viewBox="0 0 120 120" aria-hidden="true">
<g fill="none" stroke="var(--ds-ink)" stroke-width="5" stroke-linejoin="round">
<path d="M66 24 L90 24 L90 48 L66 48 Z"></path>
<path d="M42 48 L90 48 L90 72 L42 72 Z"></path>
<path d="M18 72 L90 72 L90 96 L18 96 Z"></path>
</g>
</svg>
<a class="hero-status hero-status-link" href="#">AVAILABLE FROM OCTOBER ↗</a>
</div>
<div class="hero-body">
<div class="section-head">
<span class="section-head-kicker section-head-kicker-quiet">DESIGN ENGINEER · TOOLS & INTERFACES</span>
<span class="section-head-rule"></span>
</div>
<h1 class="hero-title">I build the software that other people build things in.</h1>
<p class="hero-lede">Written first in the markup, and still on the right where there is room — it leads only once the hero has stacked.</p>
<div class="cluster hero-actions">
<a href="#" class="btn btn-primary">START A PROJECT</a>
<a href="#" class="hero-link">See selected work</a>
</div>
</div>
</section>When the status is a link
.hero-status is a label. Add .hero-status-link and it is an <a> — "open to new work" that takes you to the form. It keeps the dot, keeps the faint ink, and gains a hit area and the same hover and focus moves .hero-link makes. The arrow is yours to write; the library ships no glyphs.
Reach for it rather than link-quiet, which looks like the right tool and is not. That one sets color: inherit so a link inside a run of text takes the voice around it — and on the status itself "inherit" resolves against the aside, so the faint label came out in full ink. It is also exempt from the 24px target only while it sits in a sentence, and a status on its own line is not one: measured, 18.3px tall.
Something under both columns
.hero-foot is a full-width row at the bottom of the band. A window, a strip of marks, a picture of the thing the headline just described - whatever the statement is asking you to look at. Write it last: it spans every column and takes an automatic row, so put it above the body and it lands on row one with both columns underneath it.
grid-column: 1 / -1 is every track whether the grid made one or two, which is the same negative index .hero-aside-lead uses a section up. Narrow the specimen below and watch the mark drop under the headline while the window stays the full width of the band the whole way down. Nothing measured the window to decide that.
The air above it is the hero's own --ds-hero-gap, which is also the gap between the columns. One decision about how far apart this band holds things, rather than a second one to drift from the first.
One thing it had to be taught, and it is worth knowing if you ever span a grid of your own. auto-fit makes as many tracks as fit and then collapses the ones nothing is in - so a hero with room for three columns quietly runs on two of them and hands the body and the aside half the band each. A row spanning 1 / -1 spans that phantom, which stops it being empty, which stops it collapsing. Measured the first time this shipped: the prose column dropped from 599.8px to 371.1px, and only above about 1160px, so a narrower stage showed nothing at all. A hero with a foot asks for as many tracks as it has children now, and a check takes the foot out of the page and puts it back to prove the columns did not move.
A window under the statement
Draw it flat. Watch it stand up.
Every panel goes where you put it, and the arrangement is yours to keep.
Everything open at once, which is the arrangement most people settle into.
<section class="hero shell">
<div class="hero-body">
<div class="section-head">
<span class="section-head-kicker section-head-kicker-quiet">A DRAWING TOOL</span>
<span class="section-head-rule"></span>
</div>
<h1 class="hero-title">Draw it flat. Watch it stand up.</h1>
<p class="hero-lede">Every panel goes where you put it, and the arrangement is yours to keep.</p>
<div class="cluster hero-actions">
<a href="#" class="btn btn-primary">GET THE BUILD</a>
<a href="#" class="hero-link">Read the handbook</a>
</div>
</div>
<div class="hero-aside hero-aside-center">
<svg viewBox="0 0 120 120" aria-hidden="true">
<g fill="none" stroke="var(--ds-ink)" stroke-width="5" stroke-linejoin="round">
<path d="M66 24 L90 24 L90 48 L66 48 Z"></path>
<path d="M42 48 L90 48 L90 72 L42 72 Z"></path>
<path d="M18 72 L90 72 L90 96 L18 96 Z"></path>
</g>
</svg>
<span class="hero-divider"></span>
<span class="hero-status">VERSION 2 IS OUT</span>
</div>
<div class="hero-foot">
<div class="chrome">
<div class="chrome-bar">
<span class="chrome-lights"></span>
<span class="chrome-title">study.canvas</span>
<span class="chrome-meta">3 PANELS · 1 SELECTION</span>
</div>
<div class="placeholder" style="--ratio: 21/9">
<span class="placeholder-caption">THE THING, RUNNING</span>
</div>
<p class="chrome-foot">Everything open at once, which is the arrangement most people settle into.</p>
</div>
</div>
</section>A name, and what it is
`hero-subtitle` is a second line INSIDE the `h1`, for a hero whose title is a product's name rather than a sentence. It is a block-level `span` and not an `h2`: a heading may not contain a heading, and the outline check refuses one. Weight is what separates it from the name — at 35px under 60px in the same face, size alone reads as the line continuing.
Flatty alpha A TINY 3D SKETCHBOOK
A pixel art editor for low-poly 3D designers and indie game artists. It turns your drawings into 3D models in real time.
<section class="hero shell">
<div class="hero-body">
<div class="section-head">
<span class="section-head-kicker section-head-kicker-quiet">PIXEL ART · LOW-POLY</span>
<span class="section-head-rule"></span>
</div>
<h1 class="hero-title">
Flatty <span class="chip chip-sm">alpha</span>
<span class="hero-subtitle">A TINY 3D SKETCHBOOK</span>
</h1>
<p class="hero-lede">A pixel art editor for low-poly 3D designers and indie game artists. It turns your drawings into 3D models in real time.</p>
<div class="cluster hero-actions">
<a href="#" class="btn btn-primary">DOWNLOAD</a>
<a href="#" class="hero-link">Read the handbook</a>
</div>
</div>
</section>Reference
Read from sections/hero.css when this page was built, so it cannot fall behind the stylesheet.
.hero.hero-body.hero-subtitle.hero-title.hero-lede.hero-actions.hero-link.hero-aside.hero-aside-center.hero-aside-lead.hero-divider.hero-status.hero-status-link.hero-foot--hero-pad — falls back to --ds-pad-section-lg--ds-accent--ds-dot--ds-focus-ring--ds-focus-width--ds-font-body--ds-font-display--ds-gap-inline--ds-hairline--ds-hero-aside-w--ds-hero-col--ds-hero-gap--ds-hero-stack--ds-hero-subtitle--ds-hero-subtitle-gap--ds-hit-min--ds-ink--ds-ink-faint--ds-ink-soft--ds-measure-wide--ds-pad-card--ds-radius-round--ds-rule--ds-rule-strong--ds-text-body--ds-text-button--ds-text-chip--ds-text-hero--ds-track-meta--ds-track-subtle--ds-track-tight--ds-underline-offset--ds-weight-display--ds-weight-strongNotes
The second action is .hero-link — underlined text, not a second button. Two buttons side by side make neither of them the primary one, and the reader has to choose before they have read anything.
The rule under the aside is .hero-divider, not .section-head-rule, and the distinction matters. That one is flex: 1 1 basis for a ROW; in the aside's column the basis becomes its HEIGHT and it draws as a 48px grey block. A row device is not a column device however alike they look.
The title's measure is deliberately tight at 15ch. A display line running to thirty characters reads as a paragraph rather than a statement. Override --hero-measure if you want a longer one.
Worth knowing before you spend twenty minutes on it. This section carries its own padding-block and lives in ds-sections, so it beats shell's section classes in ds-primitives whichever one you write. Nothing is broken and nothing is a specificity fault - a later layer simply wins.
Owning it is right: a hero is the opening band, and the larger step is part of what makes it read as one. But a hero that has stopped opening the page - one with a wall of pictures above it - then sits with its own 120px under the band's 120px and no way to say so. Set --hero-pad on it, which is the same two-level shape split and flow use.