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

> Group content with a heading, supporting description, and optional action.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`Section.Root` groups related content. `Section.Header` combines [Heading](/ui/primitives/typography/heading) with a description and an optional `adornment`. Descriptions are ordinary text associated with the heading, so they do not add levels to the document outline.

<StoryEmbed storyId="ui-components-section--documentation" title="Section example" height={200} />

## Add a description and action

```tsx theme={null}
import { Section } from 'twenty-ui/components';
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."
      adornment={<Button>Edit workspace</Button>}
    />
    <Text>Workspace preferences appear here.</Text>
  </Section.Root>
);
```

`Section.Root` defaults to a full-width `div` with left alignment and the primary text color. Use `align`, `color`, and `fullWidth` to adjust the content wrapper.

`Section.Header` can also be used by itself. Its `level`, `size`, and `color` configure the heading and default to `2`, `md`, and `primary`. The header has one spacing-4 margin after it. Use native `style` or `className` to adjust that spacing.

## Description overflow

String descriptions preserve line breaks, turn URLs into links, and show up to five lines. Set `descriptionLineClamp` to a positive integer to choose another limit. Hovering or focusing an overflowing description reveals its full text; Escape dismisses the tooltip.

Pass a React node for richer supporting content. Rich descriptions render as supplied, without automatic truncation or tooltips.

## Composition

Both parts forward native attributes, refs, class names, styles, and `render` to their outer element. For example, `Section.Root render={<section aria-label="Workspace settings" />}` provides a named section, and `Section.Header render={<header />}` uses a header container.

## Props

### Section.Root

<ParamField body="Root.align" type="&#x22;center&#x22; | &#x22;left&#x22;" default="left">
  Text alignment within the section. Defaults to `left`.
</ParamField>

<ParamField body="Root.color" type="&#x22;primary&#x22; | &#x22;secondary&#x22; | &#x22;tertiary&#x22;" default="primary">
  Text color within the section. Defaults to `primary`.
</ParamField>

<ParamField body="Root.fullWidth" type="boolean" default="true">
  Whether the section fills the available width. Defaults to `true`.
</ParamField>

<ParamField body="Root.render" type="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.
</ParamField>

### Section.Header

<ParamField body="Header.adornment" type="ReactNode">
  Content alongside the heading, such as an action button or status.
</ParamField>

<ParamField body="Header.color" type="&#x22;primary&#x22; | &#x22;secondary&#x22; | &#x22;tertiary&#x22;" default="primary">
  Theme font color. Defaults to `primary`.
</ParamField>

<ParamField body="Header.description" type="ReactNode">
  Supporting text associated with the heading. Strings support links and overflow tooltips; React nodes render as supplied.
</ParamField>

<ParamField body="Header.descriptionLineClamp" type="number" default="5">
  Maximum visible lines for a string description. Defaults to `5`. Overflowing descriptions can be read in a tooltip on hover or focus.
</ParamField>

<ParamField body="Header.level" type="5 | 1 | 2 | 3 | 4 | 6" default="2">
  Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`.
</ParamField>

<ParamField body="Header.render" type="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.
</ParamField>

<ParamField body="Header.size" type="&#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xs&#x22;" default="md">
  Visual font size, independent of the heading level. Defaults to `md`.
</ParamField>

<ParamField body="Header.title" type="ReactNode" required>
  Content of the section heading.
</ParamField>