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

# Intestazione

> Visualizza intestazioni semantiche con dimensioni visive indipendenti.

## Panoramica

`Heading` esegue il rendering di un `h2` per impostazione predefinita. Usa `children` per il relativo contenuto, `level` per la struttura del documento e `size` per l'aspetto.

**Light**

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

**Dark**

[Esempio di intestazione (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--display\&viewMode=story\&globals=colorScheme:dark)

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

## Utilizzo

Scegli i livelli nell'ordine del documento. Una dimensione visiva più piccola non modifica il livello annunciato dalla tecnologia assistiva.

```tsx theme={null}
import { Heading } from 'twenty-ui/primitives/typography';

export const WorkspaceTitle = () => <Heading>Workspace settings</Heading>;
```

Le dimensioni `xs`, `sm`, `md`, `lg`, `xl` e `xxl` utilizzano i token dei caratteri corrispondenti. Le dimensioni maggiori utilizzano rispettivamente `1.54rem` e `1.85rem`. Tutte le dimensioni mantengono un peso semigrassetto e un'interlinea di `1.1`. `Section.Header` e `Dialog.Title` accettano gli stessi valori di dimensione. Le intestazioni non hanno margini esterni; la disposizione circostante gestisce la spaziatura.

## Colore e composizione

**Light**

[Dimensioni e colori dei titoli (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Dimensioni e colori dei titoli (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-heading--catalog)

Usa `color="secondary"` per le intestazioni meno prominenti. È disponibile anche `tertiary`, ma il relativo contrasto dipende dalla dimensione del carattere, dal tema e dallo sfondo. Verifica la leggibilità quando lo usi.

Gli attributi nativi, gli stili, i nomi di classe e i ref vengono passati all'intestazione. Usa `render` per comporre con un elemento o componente personalizzato; tale elemento è responsabile di preservare la semantica dell'intestazione.

Per un'intestazione con testo di supporto o azioni, utilizza [Section](https://docs.twenty.com/it/ui/components/layout/section.md).

## Props

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

Theme font color. Defaults to `primary`.

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

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

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


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