Title

h1-h6 headings
Import

Usage

Use Title component to render h1-h6 headings with Mantine theme styles. By default, Title has no margins and paddings. You can change headings font-size, font-weight and line-height properties in theme.headings.

Set order prop to render specific element (h1-h6), default order is 1:

This is h1 title

This is h2 title

This is h3 title

This is h4 title

This is h5 title
This is h6 title
import { Title } from '@mantine/core';
function Demo() {
return (
<>
<Title order={1}>This is h1 title</Title>
<Title order={2}>This is h2 title</Title>
<Title order={3}>This is h3 title</Title>
<Title order={4}>This is h4 title</Title>
<Title order={5}>This is h5 title</Title>
<Title order={6}>This is h6 title</Title>
</>
);
}

Size

You can change Title size independent from its order:

  • If you set size to h1-h6, then component will add corresponding font-size and line-height from theme
  • If you set size to any other value, then line-height will be calculated based on ordersize will impact only font-size

H3 heading with h1 font-size

H1 heading with h4 font-size

H1 heading with 12px size

import { Title } from '@mantine/core';
function Demo() {
return (
<>
<Title order={3} size="h1">
H3 heading with h1 font-size
</Title>
<Title size="h4">H1 heading with h4 font-size</Title>
<Title size={12}>H1 heading with 12px size</Title>
</>
);
}

Text props

Title supports all Text component props:

H3 heading aligned to center with 100 font-weight

Underlined h4 heading with blue color

Italic dimmed h5 heading
import { Title } from '@mantine/core';
function Demo() {
return (
<>
<Title order={3} weight={100} align="center">
H3 heading aligned to center with 100 font-weight
</Title>
<Title order={4} underline color="blue.5">
Underlined h4 heading with blue color
</Title>
<Title order={5} color="dimmed" italic>
Italic dimmed h5 heading
</Title>
</>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Title component props

NameTypeDescription
align
"left" | "right" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "start" | "justify" | "match-parent"
Sets text-align css property
children
ReactNode
Text content
color
DefaultMantineColor | "dimmed"
Key of theme.colors or any valid CSS color
gradient
MantineGradient
Controls gradient settings in gradient variant only
inherit
boolean
Inherit font properties from parent element
inline
boolean
Sets line-height to 1 for centering
italic
boolean
Adds font-style: italic style
lineClamp
number
CSS -webkit-line-clamp property
order
1 | 2 | 3 | 4 | 5 | 6
Defines component and styles which will be used
size
TitleSize
Title font-size: h1-h6 or any valid CSS font-size value
span
boolean
Shorthand for component="span"
strikethrough
boolean
Add strikethrough styles
transform
"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase"
Sets text-transform css property
underline
boolean
Underline the text
variant
"link" | "text" | "gradient"
Link or text variant
weight
FontWeight
Sets font-weight css property