Heading
Page and section title
import { Heading } from '@kalidao/reality'
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<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 20 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>> | foreground |
id | string | - |
level | "1" | "2" | "3" | 2 |
responsive | boolean | - |
transform | "capitalize" | "lowercase" | "uppercase" | - |
wordBreak | "break-word" | - |
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.