Heading
Page and section title
name | type | default | description |
|---|---|---|---|
| align | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-match-parent" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start" | - | CSS property of textAlign |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "legend" | h1 | JSX element to render. |
| color | "inherit" | "initial" | "blue" | "indigo" | "purple" | "pink" | "red" | "orange" | "yellow" | "green" | "teal" | "grey" | "background" | "text" | "accent" | "border" | "blueSurface" | "indigoSurface" | "purpleSurface" | "pinkSurface" | "redSurface" | "orangeSurface" | "yellowSurface" | "greenSurface" | "tealSurface" | "greySurface" | "accentSurface" | "blueLight" | "indigoLight" | "purpleLight" | "pinkLight" | "redLight" | "orangeLight" | "yellowLight" | "greenLight" | "tealLight" | "greyLight" | "accentLight" | "blueBright" | "indigoBright" | "purpleBright" | "pinkBright" | "redBright" | "orangeBright" | "yellowBright" | "greenBright" | "tealBright" | "greyBright" | "accentBright" | "bluePrimary" | "indigoPrimary" | "purplePrimary" | "pinkPrimary" | "redPrimary" | "orangePrimary" | "yellowPrimary" | "greenPrimary" | "tealPrimary" | "greyPrimary" | "accentPrimary" | "blueDim" | "indigoDim" | "purpleDim" | "pinkDim" | "redDim" | "orangeDim" | "yellowDim" | "greenDim" | "tealDim" | "greyDim" | "accentDim" | "blueActive" | "indigoActive" | "purpleActive" | "pinkActive" | "redActive" | "orangeActive" | "yellowActive" | "greenActive" | "tealActive" | "greyActive" | "accentActive" | "backgroundPrimary" | "backgroundSecondary" | "textPrimary" | "textSecondary" | "textTertiary" | "textAccent" | "borderPrimary" | "blueGradient" | "purpleGradient" | "redGradient" | "greenGradient" | "greyGradient" | "accentGradient" | "tranparent" | text | The color to style the component |
| id | string | - | The id attribute of element |
| level | "1" | "2" | 2 | - |
| ref | null | string | (instance: HTMLDivElement | null) => void | RefObject<HTMLDivElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
| responsive | boolean | - | - |
| transform | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "none" | "uppercase" | - | CSS property of text-transform |
By default, the semantic heading level matches the visual heading level, e.g. <Heading level="2"> will render an h2 element. If you need the semantics to be different from the visuals, you can provide the desired HTML tag via the as prop.
Use the responsive flag to resize the heading based on breakpoints.