Text

A run of body copy, as p, span or small.

A run of body copy. as picks p (the default),span for something inline, or small. It introduces no colour and no size of its own: the base layer styles the element, and the consuming component decides tone by where it puts the text, not by asking for a shade.

Style-less, like Heading — a passedclass reaches the element, a parent's scope hash does not. The shared.section-p idiom in the components layer exists partly for this: it needs no hash, so a free-standing section component can use it with no :global() anywhere.

The three elements

Tone

A paragraph. The default, and what nearly every block renders for its body copy.

Small. Used for the quiet line under something else.

A paragraph containing an inline span inside it.

Held to the measure

.section-p caps the line at 64 characters. Long body copy that fills a wide container is hard to read back to the start of the next line, which is why sections reach for the class rather than the bare element.

Tone

A bright, recently renovated two-room apartment on the second floor of a quiet, well-kept building in Odense V. Large south-facing windows bring the afternoon light into the living room, and the open kitchen leads straight onto the balcony.

Props

packages/primitives/src/Text.astro
PropTypeRequired
as"p" | "span" | "small"
classstring