Prose section

A centred, measured prose column for longer-form editorial copy — the About positioning statement, policy intros, the support band. Tone-aware, so it reads correctly on either the cream or the Deep Sea ground.

Pass media and it becomes a two-column band instead: copy one side, imagery the other, stacking to media-above-copy on mobile. That is the reframe band's shape, and the stacking order is deliberate — a one-line thesis reads better under its image than beside a squeezed one.

media is a slot, not an image prop. That is what lets a band ship complete before its art exists: pass a PhotoFrame with no src carrying a described brief, and the page is reviewable as a whole while the art lands slot by slot.

mediaSide="left" swaps the columns visually, via grid placement, without reordering the DOM — so the reading order a screen reader gets stays copy-then-media either way.

import from @halwel/ui/components/marketing/ProseSection

Variants

Cream, prose measure — the default

Why we built it this way

Care that keeps you whole.

A measured column at roughly 680px. Long enough to carry an argument, short enough that the eye returns to the right place on every line.

Deep tone

Serious medicine, handled seriously.

The same component on the Deep Sea ground. Heading and body swap to the light ink tiers; nothing else changes.

With media — right (default)

It is not effort. It is physiology.

One thesis, one band. The copy carries the argument and the media carries the register.

[PHOTO: a woman in her forties measures her waist at home, mid-morning light, matter-of-fact rather than triumphant — keep the tape measure, both hands, and her face out of frame]

the reframe band. Media is a described placeholder, not an image prop

With media — left

Reviewed by a licensed provider, every time.

Same markup, mirrored placement. Nothing about the reading order changes for a screen reader.

[PHOTO: a woman in her forties measures her waist at home, mid-morning light, matter-of-fact rather than triumphant — keep the tape measure, both hands, and her face out of frame]

columns swap visually; DOM order stays copy-then-media