Typography

Heading scale

Six heading levels. Levels 1-2 use the serif family (Newsreader) for editorial weight; levels 3-6 use the sans-serif family.

Heading 1 — Page title

Heading 2 — Section title

Heading 3 — Subsection

Heading 4 — Card title

Heading 5 — Label group

Heading 6 — Micro label

import { Heading } from '@eekodigital/raster';

<Heading level="1">Heading 1</Heading>
<Heading level="2">Heading 2</Heading>
<Heading level="3">Heading 3</Heading>

Decoupling tag from visual level

Use the as prop to render a different HTML tag without changing the visual style. Useful when the document outline and visual hierarchy diverge.

Section title

{/* Visually looks like an h3, but contributes an h2 to the document outline */}
<Heading level="3" as="h2">Section title</Heading>

Text scale

Large (1.125rem / 18px) — introductory paragraphs and lead copy.

Base (1rem / 16px) — body copy, descriptions, and general UI text.

Small (0.875rem / 14px) — captions, helper text, and metadata.

import { Text } from '@eekodigital/raster';

<Text size="lg">Large</Text>
<Text size="base">Base</Text>
<Text size="sm">Small</Text>

Text variants

Default — primary text colour.

Subtle — de-emphasised text for secondary information.

Strong — semibold weight for emphasis without heading hierarchy.

Danger — used for errors or critical notices.

<Text variant="default">Default</Text>
<Text variant="subtle">Subtle</Text>
<Text variant="strong">Strong</Text>
<Text variant="danger">Danger</Text>

Props — Heading

Prop	Type	Default	Description
level	”1” | “2” | “3” | “4” | “5” | “6"	"2”	Visual size and font style.
as	”h1” … “h6”	—	Override the HTML tag (defaults to matching h[level]).
className	string	—	Additional CSS classes.

Props — Text

Prop	Type	Default	Description
size	”sm” | “base” | “lg"	"base”	Font size.
variant	”default” | “subtle” | “strong” | “danger"	"default”	Colour and weight intent.
as	React.ElementType	”p”	HTML tag to render.
className	string	—	Additional CSS classes.