Title

import { TitleDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Title);

Usage

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

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

Size

You can change the Title size independent of its order:

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

Text wrap

Use the textWrap prop to control the text-wrap CSS property. It controls how text inside an element is wrapped.

You can also set textWrap on theme:

import { createTheme, MantineProvider, Title } from '@mantine/core';

const theme = createTheme({
  headings: {
    textWrap: 'wrap',
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Title>Some very long title that should wrap</Title>
    </MantineProvider>
  );
}

Line clamp

Set the lineClamp prop to truncate text after the specified number of lines: