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

# Sezione

> Raggruppa i contenuti con un'intestazione, una descrizione di supporto e un'azione facoltativa.

## Panoramica

`Section.Root` raggruppa contenuti correlati. `Section.Header` combina [Heading](https://docs.twenty.com/it/ui/primitives/typography/heading.md) con una descrizione e contenuto `actions` facoltativo. Le descrizioni sono testo normale associato all'intestazione, pertanto non aggiungono livelli alla struttura del documento.

**Light**

[Esempio di sezione (light)](https://storybook.twenty.com/iframe.html?id=ui-components-section--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio di sezione (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)

## Utilizzo

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

## Aggiungere una descrizione e un'azione

```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` per impostazione predefinita è un `div` a larghezza intera con allineamento a sinistra e il colore del testo principale. Usa `align`, `color` e `fullWidth` per regolare il wrapper del contenuto.

`Section.Header` può essere utilizzato anche da solo. I relativi `level`, `size` e `color` configurano l'intestazione e per impostazione predefinita sono `2`, `md` e `primary`. Dopo l'intestazione è presente un margine spacing-4. Usa `style` o `className` nativi per regolare quella spaziatura.

## Overflow della descrizione

Le descrizioni delle stringhe mostrano fino a cinque righe. Imposta `descriptionLineClamp` su un numero intero positivo per scegliere un altro limite oppure su `false` per visualizzare la descrizione completa senza un tooltip di overflow. Al passaggio del mouse viene visualizzato il testo in eccesso. Per impostazione predefinita, le descrizioni non aggiungono una destinazione di tabulazione; imposta `isDescriptionFocusable` per abilitare l'accesso tramite stato attivo al tooltip. Esc chiude il tooltip.

L'intestazione accetta contenuti del nodo. Scegli `level` per la struttura del documento indipendentemente da `size` e `color` visivi. Componi esplicitamente collegamenti e altri contenuti avanzati in una descrizione del nodo.

Passa un nodo React per contenuti di supporto più ricchi. Le descrizioni avanzate vengono visualizzate come fornite, senza troncamento automatico né tooltip.

## Composizione

Entrambe le parti inoltrano attributi nativi, ref, nomi di classe, stili e `render` al proprio elemento esterno. Ad esempio, `Section.Root render={<section aria-label="Workspace settings" />}` fornisce una sezione denominata e `Section.Header render={<header />}` utilizza un contenitore header.

Durante la migrazione, sostituisci `adornment` con `actions`. Attiva lo stato attivo della descrizione con `isDescriptionFocusable` quando necessario. `SectionRootProps` e `SectionHeaderProps` vengono esportati da `twenty-ui/components/layout`.

## Props

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