Skip to content

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.