---
description: Компонент для отображения крупных заголовков. Используется для акцентных надписей на экране — обложек, вводных экранов и других сценариев, где требуется максимально крупный текст.
tags: heading, display
---

<Overview group="typography" forcedPath="components/Typography/DisplayTitle/DisplayTitle.tsx">

# DisplayTitle [tag:component]

Компонент для отображения крупных заголовков. Используется для акцентных надписей на экране —
обложек, вводных экранов и других сценариев, где требуется максимально крупный текст.

</Overview>

{/* @example-description: Все четыре уровня DisplayTitle для сравнения размеров. */}
<Playground>
  ```jsx
  <Flex direction="column">
    <DisplayTitle level="1">DisplayTitle уровень 1</DisplayTitle>
    <DisplayTitle level="2">DisplayTitle уровень 2</DisplayTitle>
    <DisplayTitle level="3">DisplayTitle уровень 3</DisplayTitle>
    <DisplayTitle level="4">DisplayTitle уровень 4</DisplayTitle>
  </Flex>
  ```
</Playground>

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end"` | `-` | Выравнивание текста. Не имеет эффекта при inline={true}. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `span` |  |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `inline` | `boolean` | `false` | Делает блок инлайновым. |
| `level` | `"1" \| "2" \| "3" \| "4"` | `1` | Уровень заголовка (от 1 до 4). |
| `normalize` | `boolean` | `true` | Убирает внешние отступы. |
| `useAccentWeight` | `boolean` | `-` | Включает акцентный тип начертания шрифта. Используются токены fontWeightAccent[1, 2, 3] Используется только вместе с `weight`. |
| `weight` | `"1" \| "2" \| "3"` | `-` | Задаёт начертание шрифта, отличное от стандартного. |