Headings
Type Scale
5xl
fluid
36–72px
Shavin keeps you on track
Hero
4xl
fluid
36–60px
Shavin keeps you on track
Display
3xl
fluid
36–48px
Shavin keeps you on track
Display / H1
2xl
fluid
30–36px
Shavin keeps you on track
H2
xl
fluid
24–30px
Shavin keeps you on track
H3
lg
text-2xl
24px
Shavin keeps you on track
H4
md
text-xl
20px
Shavin keeps you on track
H5
sm
text-lg
18px
Shavin keeps you on track
H6
Sizes & Tags Decoupled
h1 tag, rendered at sm size
h4 tag, rendered at 2xl size
Component Source
import { Heading } from "@shavin/ui";
{/* Render as a semantic h1, styled as a small heading */}
<Heading as="h1" size="sm">
h1 tag, rendered at sm size
</Heading>
{/* Render as a semantic h4, styled as a huge heading */}
<Heading as="h4" size="2xl">
h4 tag, rendered at 2xl size
</Heading>Heading Weights
Weight normal
Weight medium
Weight semibold
Weight bold
Component Source
import { Heading } from "@shavin/ui";
<Heading weight="normal">Weight normal</Heading>
<Heading weight="medium">Weight medium</Heading>
<Heading weight="semibold">Weight semibold</Heading>
<Heading weight="bold">Weight bold</Heading>Overline — section labels
Section label
Component Source
import { Text } from "@shavin/ui";
{/* The uppercase micro-label used above groups of content */}
<Text size="overline" color="subtle">Section label</Text>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | ElementType | h2 | Polymorphic heading element: h1-h6, div, span, etc. Default "h2". |
| truncate | boolean | "false" | Whether to truncate overflowing text with an ellipsis. |
| size | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "lg" | — |
| weight | "inherit" | "normal" | "medium" | "semibold" | "bold" | "semibold" | — |
| tracking | "inherit" | "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | "normal" | — |