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

# Secțiune

> Grupați conținutul cu un titlu, o descriere suplimentară și o acțiune opțională.

## Prezentare generală

`Section.Root` grupează conținut asociat. `Section.Header` combină [Heading](https://docs.twenty.com/ro/ui/primitives/typography/heading.md) cu o descriere și conținut opțional `actions`. Descrierile sunt text obișnuit asociat titlului, deci nu adaugă niveluri la structura documentului.

**Light**

[Exemplu de secțiune (light)](https://storybook.twenty.com/iframe.html?id=ui-components-section--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Exemplu de secțiune (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)

## Utilizare

```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>
);
```

## Adăugați o descriere și o acțiune

```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` este implicit un `div` pe toată lățimea, cu aliniere la stânga și culoarea principală a textului. Utilizați `align`, `color` și `fullWidth` pentru a ajusta containerul de conținut.

`Section.Header` poate fi utilizat și singur. `level`, `size` și `color` ale acestuia configurează titlul și au implicit valorile `2`, `md` și `primary`. Antetul are după el o margine de spacing-4. Utilizați `style` sau `className` native pentru a ajusta acea spațiere.

## Depășirea descrierii

Descrierile șirurilor afișează până la cinci rânduri. Setați `descriptionLineClamp` la un număr întreg pozitiv pentru a alege o altă limită sau la `false` pentru a afișa descrierea completă fără un indiciu pentru depășire. Trecerea cu cursorul dezvăluie textul care depășește spațiul disponibil. Descrierile nu adaugă implicit o oprire de tabulare; setați `isDescriptionFocusable` pentru a activa accesul prin focalizare la indiciul contextual. Escape închide indiciul contextual.

Titlul acceptă conținut de nod. Alegeți `level` pentru structura documentului independent de `size` și `color` vizuale. Compuneți explicit linkuri și alt conținut îmbogățit într-o descriere de nod.

Transmiteți un nod React pentru conținut suplimentar mai bogat. Descrierile bogate sunt randate așa cum sunt furnizate, fără trunchiere automată sau indicații contextuale.

## Compoziție

Ambele părți redirecționează atributele native, referințele, numele de clase, stilurile și `render` către elementul lor exterior. De exemplu, `Section.Root render={<section aria-label="Workspace settings" />}` oferă o secțiune denumită, iar `Section.Header render={<header />}` utilizează un container de antet.

La migrare, înlocuiți `adornment` cu `actions`. Activați focalizarea descrierii cu `isDescriptionFocusable` atunci când este necesar. `SectionRootProps` și `SectionHeaderProps` sunt exportate din `twenty-ui/components/layout`.

## Proprietăți

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