Heading
Large text for section titles and subtitles
<Heading>Hello world</Heading>
PropsLink to this heading
Link to this heading
<Heading>
import { Heading } from '@strum/react';
name | type | default |
---|---|---|
align | ConditionalStyle<Values<("left" | "right" | "center")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>> | - |
as | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "legend" | - |
color | ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>> | neutral12 |
id | string | - |
level | "1" | "2" | "3" | 2 |
responsive | boolean | true |
transform | "capitalize" | "lowercase" | "uppercase" | - |
wordBreak | "break-word" | - |
LevelsLink to this heading
Link to this heading
The level prop will set both the size of the text and the semantic level of the element, e.g. <Heading level="2" /> will render an h2. You can override the HTML tag via the as prop.
<Heading level="1">Level 1</Heading><Heading level="2">Level 2</Heading><Heading level="3">Level 3</Heading><Heading as="h4" level="3">Level 3 as h4</Heading>
AlignLink to this heading
Link to this heading
<Heading align="left">Left</Heading><Heading align="center">Center</Heading><Heading align="right">Right</Heading>
ColorLink to this heading
Link to this heading
<Stack alignItems="center" direction="horizontal" justifyContent="space-around"><Stack><Heading color="accent11">Accent 11</Heading><Heading color="error11">Error 11</Heading><Heading color="warning11">Warning 11</Heading><Heading color="success11">Success 11</Heading></Stack><Stack><Heading color="neutral12">Neutral 12</Heading><Heading color="neutral11">Neutral 11</Heading><Heading color="neutral10">Neutral 10</Heading></Stack></Stack>
ResponsiveLink to this heading
Link to this heading
By default, headings resize for smaller devices. You can disable this feature with the responsive property.
<Heading level="2" responsive={false}>I will not resize</Heading>