Components Typography
Heading
StableSection headings with a semantic level and an independent visual size.
Choose `level` to match the document outline and `size` to match the visual hierarchy. Keeping them separate lets a card title be an h3 that looks small, or a hero be an h1 at display size, without breaking the outline screen-reader users navigate by.
Overview
Organisation templates
import { Heading } from '@bindshq/stance-react';
export function Basic() {
return <Heading level={2}>Organisation templates</Heading>;
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Organisation templates
Organisation templates
Organisation templates
Import
import { Heading } from '@bindshq/stance-react';Playground
Email signatures for every team
<Heading>Email signatures for every team</Heading>Examples
display · One system
3xl · One system
2xl · One system
xl · One system
lg · One system
md · One system
sm · One system
import { Heading, Stack } from '@bindshq/stance-react';
export function Scale() {
return (
<Stack gap={3}>
{(['display', '3xl', '2xl', 'xl', 'lg', 'md', 'sm'] as const).map((s) => (
<Heading key={s} level={3} size={s}>
{s} · One system
</Heading>
))}
</Stack>
);
}Contracts
Master services agreement
Acme Ltd · Draft v3
import { Heading, Stack, Text } from '@bindshq/stance-react';
export function Decoupled() {
return (
<Stack gap={1}>
<Text eyebrow>Contracts</Text>
<Heading level={2} size="2xl">
Master services agreement
</Heading>
<Heading level={3} size="md" tone="muted" weight="medium">
Acme Ltd · Draft v3
</Heading>
</Stack>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Semantic level (h1 to h6). |
size | 'display' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | None | Visual size. Defaults by level. |
as | 'h1'…'h6' | 'p' | 'span' | 'div' | 'legend' | None | Override the rendered element. |
weight | 'medium' | 'semibold' | 'bold' | 'semibold' | Font weight. |
align | 'start' | 'center' | 'end' | None | Text alignment. |
tone | 'default' | 'muted' | 'default' | Colour. |
balance | boolean | true | Balance multi-line headings. |
Accessibility
- Keep one h1 per page and do not skip levels. Screen-reader users navigate by heading.
- Display and 3xl sizes scale fluidly with clamp() and respect browser zoom.
Usage guidelines
Do
- Write headings that describe the content below.
- Use sentence case.
Don’t
- Pick a level for its size; use size.