Design System

Prose callout

The set-apart passage inside a long prose document — a policy page, an article. It replaces the generic tinted box with a coloured left border, which is the one callout shape every template on the internet reaches for.

Two variants, chosen by what the passage is, not by how loud it should be. statement is a sentence the document must carry prominently (the HIPAA header, a statutory warning, a thesis): a gold eyebrow, a Scotch rule that draws in, the sentence in the display face with a hanging terracotta § in the margin, and a hairline close carrying the citation — no fill, no box; it earns prominence through type and rule, like a printed statute. specimen is a verbatim sample of something the reader will receive, rendered as the artefact itself: monogram avatar, sender and channel, an incoming message bubble, a delivery line — “you may receive a message like this” is shown, not described.

Pass statement text in sentence case; the face carries the weight, caps would shout. Under 900px the § steps above the sentence instead of hanging. Motion is once-only and off under reduced motion.

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

Variants

Statement — the HIPAA header as shipped on /hipaa
Statement — no eyebrow, no cite (a thesis in an article)
Specimen — the SMS opt-in confirmation as shipped on /sms-terms-and-conditions
Sample message
HalwelSMS
Halwel: You have successfully opted in to receive SMS messages regarding consultations, care updates, and service notifications. Message frequency may vary. Msg & data rates may apply. Reply STOP to opt out or HELP for help.
Delivered · just now
Specimen — email channel, no delivery line
Subject line
Halwel careEmail
Your clinician has reviewed your intake — next step inside.