Title

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.

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
Name	Type	Default	Description
headingLevelrequired	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'		The heading level to use
children	React.ReactNode	''	Content rendered inside the Title
className	string	''	Additional classes added to the Title
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set 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 column	Selector	Variable	Value

View source on GitHub