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
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
order
–size
will impact only font-size
H3 heading with h1 font-size
H1 heading with h4 font-size
H1 heading with 0.75rem size
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
Title component props
Name | Type | Description |
---|---|---|
align | "left" | "right" | "center" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "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 |
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 |
truncate | true | "end" | "start" | CSS truncate overflowing text with an ellipsis |
underline | boolean | Underline the text |
weight | FontWeight | Sets font-weight css property |