EN
← All components

text

Typography primitive that decouples style from semantic tag. Pick a visual variant (display, h1–h4, lead, body, small, muted, eyebrow, code) and optionally override the rendered tag with `as`. Use `tone` for default | muted | subtle colour.

Install npx astro-ignite add text
text.astro 11 variants · 4 weights · polymorphic
Variant
display

Astro sites, built for AI agents.

h1

The full type scale, in one component.

h2

Section heading at h2 size.

h3

Card title at h3 size.

h4

Compact heading at h4 size.

lead

A larger paragraph for intros and ledes — sits between a heading and body copy.

body

Body copy. Default size, optimised for long-form reading at comfortable line height.

small

Smaller copy for captions, footnotes, and metadata.

muted

Muted copy — same scale as small, dimmer colour for de-emphasis.

eyebrow

Section eyebrow

code npx astro-ignite
As
variant="display" as="p"

Same display style, semantic <p> tag.

Weight
weight="normal"

The quick brown fox jumps over the lazy dog.

weight="medium" (default for h2)

The quick brown fox jumps over the lazy dog.

weight="semibold"

The quick brown fox jumps over the lazy dog.

weight="bold"

The quick brown fox jumps over the lazy dog.

Tone
tone="default"

Body copy. Default size, optimised for long-form reading at comfortable line height.

tone="muted"

Body copy. Default size, optimised for long-form reading at comfortable line height.

tone="subtle"

Body copy. Default size, optimised for long-form reading at comfortable line height.