A title component applies top and bottom margins, font-weight, font-size, and line-height to titles. The most common usage for a title is to define headings within a page. For more information about the relationship between title component sizes and HTML heading levels, see the Typography guidelines.


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



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

View source on GitHub