Heading
Large text for section titles and subtitles
PropsLink to this heading
Link to this heading
<Heading>
import { Heading } from '@strum/react';
name | type | default |
|---|---|---|
align | ConditionalStyle<Values<("center" | "left" | "right")[], { 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.
AlignLink to this heading
Link to this heading
ColorLink to this heading
Link to this heading
ResponsiveLink to this heading
Link to this heading
By default, headings resize for smaller devices. You can disable this feature with the responsive property.