Build / Atoms

Heading

atom
play-fn

Section titles, card headers, and hero statements.

Rank and appearance are separate: level keeps the document outline correct for screen readers, size controls how big it looks.

import { Heading } from '@meetcard/deck'

Example

<Heading level={1} size="display-sm">Your deck</Heading> <Heading level={2}>Recent connections</Heading>

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <Heading>Your network is your net worth.</Heading>;

In-page hierarchy: the Heading ramp, 24/32 down to 14/20.

Heading Scale

Source

const HeadingScale = () => <Stack gap={12}>
    <Heading size="xl">Your network is your net worth.</Heading>
    <Heading size="lg">Your network is your net worth.</Heading>
    <Heading size="md">Your network is your net worth.</Heading>
    <Heading size="sm">Your network is your net worth.</Heading>
    <Heading size="xs">Your network is your net worth.</Heading>
</Stack>;

Hero moments: the Display ramp. Use at most one per viewport.

Display Scale

Source

const DisplayScale = () => <Stack gap={12}>
    <Heading size="display-lg">MeetCard</Heading>
    <Heading size="display-md">MeetCard</Heading>
    <Heading size="display-sm">MeetCard</Heading>
</Stack>;

Rank and size are independent: level keeps the document outline correct for screen readers while size controls appearance.

Rank Separate From Size

Source

const RankSeparateFromSize = () => <Heading level={4} size="display-sm">Visually large, rank 4</Heading>;

Props

Prop	Type	Default	Description
`family`	`'sans' \| 'serif'`	`'sans'`	Typeface. `serif` is Fraunces — reserved for signature, editorial moments (a person's name on their own card), never routine hierarchy.
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Heading rank, which drives the rendered `h1`–`h6` tag. Choose this for document structure, then adjust `size` if the visual weight should differ.
`size`	`\| 'display-2xl' \| 'display-xl' \| 'display-lg' \| 'display-md' \| 'display-sm' \| 'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'`	—	Visual size. Defaults to the natural size for `level`.
`tone`	`\| 'default' \| 'muted' \| 'inverse' \| 'brand' \| 'display'`	`'default'`	—
`truncate`	`boolean`	`false`	—

Also accepts everything from HTMLAttributes, so id, data-* and event handlers pass straight through.