Typography
The fluid type scale as CSS classes. Aura does not ship a Typography component.
Aura sets type in CSS. Headings and paragraphs use clamp() from custom properties on the element. A Typography component would only repeat those classes, so this page is the specimen.
The full rules, the 17px form floor, and the font stacks are on Typography.
Scale
| Class | Also on | Role |
|---|---|---|
.h1 | h1 | Display |
.h2 | h2 | Page title |
.h3 | h3 | Section |
.h4 | h4, blockquote | Subsection |
.h5 | h5 | Minor heading |
.h6 | h6 | Label heading |
.p | p | Body |
.small | Small label | |
.xs | Micro label |
text-sm and text-xs are the only Tailwind sizes for small UI text. They stay off input, textarea, and select. .small is the small-label class: 14px, weight 500, line-height 1.4rem (23.8px at a 17px root). .xs is the micro style: 12px, semibold, line-height 16px (calc(12 / 17 * 1rem) and calc(16 / 17 * 1rem) at a 17px root). Badges use .xs.
Specimen
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Body copy uses the paragraph clamp. The root font size is 17px, so 1rem already meets the mobile floor.
A non-heading can take .h4 when the outline should stay flat and the size should match a fourth-level heading.
Editorial emphasis uses the same fluid size as h4.
Small utility text uses text-sm.
Micro labels use text-xs.
Small labels use the small class.
Micro labels use the xs class.