Title

h1-h6 headings

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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 and line-height properties in theme.

Pass 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>
    </>
  );
}

Go back

Text – @mantine/core

Up next

TypographyStylesProvider – @mantine/core

Build fully functional accessible web applications faster than ever

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter