Vertical column
hero.japanese-vertical-column · hero
- Rule
- The headline runs vertically (top to bottom) in columns 11–12 from the top edge; a small vermilion seal sits in column 10; the subhead and a text link are pinned bottom-left in 2–5. Columns 6–9 stay empty.
- Slots
headline,eyebrow,subhead,cta- Grid
- headline
11-12· seal10-10· text2-5 - Notes
- Set the headline with writing-mode: vertical-rl (not a rotated horizontal line) so it reads top to bottom; at phone width it becomes a horizontal h1 at step 4 above the text.
The headline stands vertically (`writing-mode: vertical-rl`, step 5, weight 400) in columns 11–12, starting at the top edge of the hero. A small vermilion seal sits at the top of column 10, touching the headline's left side. The eyebrow (small, muted), the subhead (body, loose leading, max 34 ch) and a text link with an arrow are pinned to the bottom of columns 2–5. Columns 6–9 stay empty. At phone width the headline turns horizontal at step 4 and the text follows it.
Open alone, full size (desktop, tablet, phone; layout tree included)
We make complicated companies simple to choose
Brand & product studio
Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.
Start a projectWe make complicated companies simple to choose
Brand & product studio
Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.
Start a project