> ## 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.

# Секция

> Сгруппируйте содержимое с заголовком, дополнительным описанием и необязательным действием.

## Обзор

`Section.Root` группирует связанное содержимое. `Section.Header` объединяет [Заголовок](https://docs.twenty.com/ru/ui/primitives/typography/heading.md) с описанием и необязательным содержимым `actions`. Описания — это обычный текст, связанный с заголовком, поэтому они не добавляют уровни в структуру документа.

**Light**

[Пример раздела (light)](https://storybook.twenty.com/iframe.html?id=ui-components-section--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример раздела (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-section--display\&viewMode=story\&globals=colorScheme:dark)

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

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

```tsx theme={null}
import { Section } from 'twenty-ui/components/layout';
import { Text } from 'twenty-ui/primitives/typography';

export const WorkspaceSection = () => (
  <Section.Root>
    <Section.Header
      title="Workspace settings"
      description="Manage your workspace name and preferences."
    />
    <Text>Workspace preferences appear here.</Text>
  </Section.Root>
);
```

## Добавьте описание и действие

```tsx theme={null}
import { Section } from 'twenty-ui/components/layout';
import { Button } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const WorkspaceSection = () => (
  <Section.Root>
    <Section.Header
      title="Workspace settings"
      description="Manage your workspace name and preferences."
      actions={<Button>Edit workspace</Button>}
    />
    <Text>Workspace preferences appear here.</Text>
  </Section.Root>
);
```

`Section.Root` по умолчанию представляет собой `div` на всю ширину с выравниванием по левому краю и основным цветом текста. Используйте `align`, `color` и `fullWidth`, чтобы настроить обёртку содержимого.

`Section.Header` также можно использовать отдельно. Его `level`, `size` и `color` настраивают заголовок и по умолчанию имеют значения `2`, `md` и `primary`. После заголовка есть один отступ spacing-4. Используйте нативные `style` или `className`, чтобы настроить этот отступ.

## Переполнение описания

Описания строк отображаются не более чем в пяти строках. Установите для `descriptionLineClamp` положительное целое число, чтобы выбрать другое ограничение, или `false`, чтобы отобразить полное описание без всплывающей подсказки при переполнении. При наведении отображается текст, не помещающийся в строке. Описания по умолчанию не добавляют точку остановки Tab; установите `isDescriptionFocusable`, чтобы включить доступ к всплывающей подсказке с помощью фокуса. Клавиша Escape закрывает всплывающую подсказку.

Заголовок поддерживает содержимое узла. Выбирайте `level` для структуры документа независимо от визуальных `size` и `color`. Явно компонуйте ссылки и другое форматированное содержимое в описании узла.

Передайте узел React для более насыщенного дополнительного содержимого. Расширенные описания отображаются в переданном виде, без автоматического усечения или всплывающих подсказок.

## Композиция

Обе части передают нативные атрибуты, refs, имена классов, стили и `render` своему внешнему элементу. Например, `Section.Root render={<section aria-label="Workspace settings" />}` предоставляет именованный раздел, а `Section.Header render={<header />}` использует контейнер заголовка.

При миграции замените `adornment` на `actions`. При необходимости включайте фокусировку описания с помощью `isDescriptionFocusable`. `SectionRootProps` и `SectionHeaderProps` экспортируются из `twenty-ui/components/layout`.

## Свойства

### Section.Root

**Root.align** `"center" | "left"` (default: left)

Text alignment within the section. Defaults to `left`.

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

Text color within the section. Defaults to `primary`.

**Root.fullWidth** `boolean` (default: true)

Whether the section fills the available width. Defaults to `true`.

**Root.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.

### Section.Header

**Header.actions** `ReactNode`

Content alongside the heading, such as an action button or status.

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

Theme font color. Defaults to `primary`.

**Header.description** `ReactNode`

Supporting text associated with the heading. Strings have optional truncation and overflow tooltips; React nodes render as supplied.

**Header.descriptionLineClamp** `number | false` (default: 5)

Maximum visible lines for a string description. Defaults to `5`; use `false` to display the full description without a tooltip.

**Header.isDescriptionFocusable** `boolean` (default: false)

Adds a tab stop to a truncated string description so its overflow tooltip can open on focus. Defaults to `false`.

**Header.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`.

**Header.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.

**Header.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`.

**Header.title** `ReactNode` *required*

Content of the section heading.


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