Section

Example#

Usage#

Every block of a page is a Section. It is the legibility rule in code: the words print on a plate, and the art, if there is any, sits beside, above, below or around that plate, never under the words (D-B1).

• plate is where the children print: the stock (default), white, sunken, the slab or a line plate. Every plate is opaque and re-scopes the text, rule and focus inks, so components read right on it.
• art takes one <Art> element; artPlacement puts it at the end (default), start, above, below or surround, and artOnPhone decides where it goes below the md width. With surround, the plate becomes an inset with a paper gutter.
• volume="up" prints the section one step louder than the page, for a hero or a campaign band. Absolute volumes are for the places D-B3 allows: heroes up to Press, campaigns and the 404.
• Pins. stock, theme and colourway pin a subtree, such as a Night band or a client colourway on a case study.
• width (prose, content, wide, full) and space (none to lg) set the measure and the rhythm.

Anatomy#

Volume#

The plate and its words never change. The art slot is where the volume shows: at Quiet art stays still and flat, from Studio it can move and settle, and at Press and Rave a loop gets a pause key.

• Quiet

  Fernlight

  Booked out to March, and the price list is on the first screen.

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  Fernlight

  Booked out to March, and the price list is on the first screen.

  The site default. Art on its own plates, one display moment per view.

• Press

  Fernlight

  Booked out to March, and the price list is on the first screen.

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  Fernlight

  Booked out to March, and the price list is on the first screen.

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• One idea per section, introduced by a SectionHead.
• Name a section that is a landmark with labelledBy pointing at its heading; most sections need no landmark.
• Art is decoration or a picture with its own alternative text; a sentence is never written into the art.

Do and don't#

Accessibility#

• The plate comes first in the DOM, so reading order never depends on where the art is drawn.
• Art is aria-hidden unless it has a label (then role="img") or is interactive (the 3D pile brings its own keyboard and text alternatives).
• A section is a region landmark only when you give it labelledBy or aria-label.
• surround keeps an opaque plate with a gutter over the art; the art never takes pointer events over the plate.

Props#

Tokens#

Changelog#