Heading
Notes
A component for marking up page headings. Provide the component a tagName
appropriate for the
current document outline, and a standardized size
.
Additional visual styling can be accomplished by passing in text-*
utility classes.
By separating the visual style and HTML element of heading elements, we can ensure that pages have appropriate, accessible document outlines without having to worry about changing visuals.
For more information, see Managing Typography on Large Apps and Abandoning Global Heading Styles.
Props
- autoFocus
bool
[false]
Use this prop to move focus to a heading. For accessibility, focus should in various conditions be moved to an existing heading. This is particularly relevant for the page heading (h1) on single page app transitions, but should NOT be used for an initial page load from the server, as in that case the user should be afforded the chance to experience the site navigation.
- bottomBorder
bool
Creates a stylized bottom border beneath the text
- children
node
- className
string
- size
oneOf('xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs')
These map to standard
text-*
utility classes. An alternative to the size prop is to specify atext-*
className, but headings will likely evolve to include refined letter-spacing and line-height per size, so it's best to stick with the size props. - tagName
any
*The HTML tagName or React component to be rendered. This should almost always be an
h1
–h6
element that forms a correct document outline.
Example: Heading Size XL
<Heading tagName='h1' size='xl'>The quick brown fox ordered a triple whip mocha Frappuccino.</Heading>
Heading Size XL details
- Size
headingSizeXl
- REM
3.1 (31px)
Example: Heading Size Lg
<Heading tagName='h2' size='lg' className='font-bold'>The quick brown fox ordered a triple whip mocha Frappuccino.</Heading>
Heading Size Lg details
- Size
headingSizeLg
- REM
2.6 (26px)
- Modifiers
Bold
Example: Heading Size Md
<Heading tagName='h3' size='md'>The quick brown fox ordered a triple whipmocha Frappuccino with an extra shot.</Heading>
Heading Size Md details
- Size
headingSizeMd
- REM
2.2 (22px)
Example: Heading Size Sm
<Heading tagName='h4' size='sm'>The quick brown fox ordered a triple whipmocha Frappuccino with an extra shot.</Heading>
Heading Size Sm details
- Size
headingSizeSm
- REM
1.9 (19px)
Example: Heading Size Xs
<Heading tagName='h4' size='xs' className='font-bold'>The quick brown fox ordered a triple whipmocha Frappuccino with an extra shot anda tall iced Americano with room.</Heading>
Heading Size Xs details
- Size
headingSizeXs
- REM
1.7 (17px)
- Modifiers
Bold
Example: Heading Size Xxs
<Heading tagName='h4' size='xxs' className='text-upper text-bold'>The quick brown fox ordered a triple whipmocha Frappuccino with an extra shot anda tall iced Americano with room.</Heading>
Heading Size Xxs details
- Size
headingSizeXxs
- REM
1.4 (14px)
- Modifiers
Uppercase & Bold
Example: Heading with Border
<div><Heading tagName='h4' size='sm' bottomBorder className='text-semibold pb3'>This heading has a bottom border!</Heading><p>Whipped robust cinnamon café au lait robust at frappuccino. A, mocha extra , coffee, cinnamon turkish strong spoon ut whipped caffeine barista. Plunger pot single shot extraction dripper aftertaste white lungo. Aroma coffee froth siphon cinnamon fair trade saucer. Cream breve espresso french press crema cappuccino instant robust.</p></div>