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

# Sección

> Agrupa contenido con un encabezado, una descripción complementaria y una acción opcional.

## Resumen

`Section.Root` agrupa contenido relacionado. `Section.Header` combina [Heading](https://docs.twenty.com/es/ui/primitives/typography/heading.md) con una descripción y contenido `actions` opcional. Las descripciones son texto normal asociado al encabezado, por lo que no añaden niveles al esquema del documento.

**Light**

[Ejemplo de sección (light)](https://storybook.twenty.com/iframe.html?id=ui-components-section--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ejemplo de sección (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)

## "Uso"

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

## Añade una descripción y una acción

```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` usa de forma predeterminada un `div` de ancho completo con alineación a la izquierda y el color de texto principal. Usa `align`, `color` y `fullWidth` para ajustar el contenedor de contenido.

`Section.Header` también puede usarse por sí solo. Sus `level`, `size` y `color` configuran el encabezado y, de forma predeterminada, son `2`, `md` y `primary`. El encabezado tiene un margen de espaciado 4 después de él. Usa `style` o `className` nativos para ajustar ese espaciado.

## Desbordamiento de la descripción

Las descripciones de cadenas muestran hasta cinco líneas. Establece `descriptionLineClamp` en un entero positivo para elegir otro límite, o en `false` para mostrar la descripción completa sin una información sobre herramientas de desbordamiento. Al pasar el cursor se muestra el texto desbordado. Las descripciones no añaden una parada de tabulación de forma predeterminada; establece `isDescriptionFocusable` para habilitar el acceso mediante el foco a la información sobre herramientas. Escape descarta la información sobre herramientas.

El encabezado acepta contenido de nodo. Elija `level` para el esquema del documento independientemente de `size` y `color` visuales. Componga explícitamente enlaces y otro contenido enriquecido en una descripción de nodo.

Pasa un nodo de React para obtener contenido complementario más enriquecido. Las descripciones enriquecidas se representan tal como se proporcionan, sin truncamiento automático ni información sobre herramientas.

## Composición

Ambas partes reenvían atributos nativos, refs, nombres de clase, estilos y `render` a su elemento externo. Por ejemplo, `Section.Root render={<section aria-label="Workspace settings" />}` proporciona una sección con nombre, y `Section.Header render={<header />}` usa un contenedor de encabezado.

Al migrar, reemplace `adornment` por `actions`. Active el enfoque de la descripción con `isDescriptionFocusable` cuando sea necesario. `SectionRootProps` y `SectionHeaderProps` se exportan desde `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.