> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Заголовок

> Отображайте семантические заголовки с независимыми визуальными размерами.

## Обзор

`Heading` по умолчанию отображает `h2`. Используйте `children` для содержимого, `level` для структуры документа, а `size` для внешнего вида.

**Light**

[Пример заголовка (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример заголовка (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-heading--display)

## Использование

Выбирайте уровни в порядке следования в документе. Меньший визуальный размер не изменяет уровень, объявляемый вспомогательными технологиями.

```tsx theme={null}
import { Heading } from 'twenty-ui/primitives/typography';

export const WorkspaceTitle = () => <Heading>Workspace settings</Heading>;
```

Размеры `xs`, `sm`, `md`, `lg`, `xl` и `xxl` используют соответствующие токены шрифта. Для больших размеров используются `1.54rem` и `1.85rem` соответственно. Во всех размерах сохраняются полужирное начертание и межстрочный интервал `1.1`. `Section.Header` и `Dialog.Title` принимают те же значения размера. У заголовков нет внешних отступов; интервалы определяются окружающей разметкой.

## Цвет и композиция

**Light**

[Размеры и цвета заголовков (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Размеры и цвета заголовков (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-heading--catalog)

Используйте `color="secondary"` для менее заметных заголовков. `tertiary` также доступен, но его контрастность зависит от размера шрифта, темы и фона. Проверяйте читаемость при его использовании.

Нативные атрибуты, стили, имена классов и refs передаются заголовку. Используйте `render` для композиции с пользовательским элементом или компонентом; этот элемент отвечает за сохранение семантики заголовка.

Для заголовка с поясняющим текстом или действиями используйте [Section](https://docs.twenty.com/ru/ui/components/layout/section.md).

## Свойства

**color** `"primary" | "secondary" | "tertiary"` (default: primary)

Theme font color. Defaults to `primary`.

**level** `1 | 2 | 3 | 4 | 5 | 6` (default: 2)

Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**size** `"lg" | "md" | "sm" | "xl" | "xs" | "xxl"` (default: md)

Visual font size from `xs` through `xxl`, independent of the heading level. Uses the matching font token. Defaults to `md`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.