Title

A title component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings.

Examples

Default Sizes

H1-styled title

H2-styled title

H3-styled title

H4-styled title

H5-styled title
H6-styled title

Custom Sizes

4xl title

3xl title

2xl title

xl title

lg title
md title

Props

Title

*required
NameTypeDefaultDescription
headingLevelrequired'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'The heading level to use
childrenReact.ReactNode''Content rendered inside the Title
classNamestring''Additional classes added to the Title
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
size'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'The size of the Title

CSS variables

Expand or collapse columnSelectorVariableValue