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

# Titlu

> Afișați titluri semantice cu dimensiuni vizuale independente.

## Prezentare generală

`Heading` redă implicit un `h2`. Folosiți `children` pentru conținutul său, `level` pentru structura documentului și `size` pentru aspect.

**Light**

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

**Dark**

[Exemplu de titlu (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)

## Utilizare

Alegeți nivelurile în ordinea documentului. O dimensiune vizuală mai mică nu modifică nivelul anunțat de tehnologia de asistență.

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

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

Dimensiunile `xs`, `sm`, `md`, `lg`, `xl` și `xxl` utilizează tokenurile de font corespunzătoare. Dimensiunile mai mari utilizează `1.54rem` și, respectiv, `1.85rem`. Toate dimensiunile păstrează grosimea semibold și o înălțime a liniei de `1.1`. `Section.Header` și `Dialog.Title` acceptă aceleași valori pentru dimensiune. Titlurile nu au margine exterioară; aspectul din jur gestionează spațierea.

## Culoare și compoziție

**Light**

[Dimensiuni și culori ale titlurilor (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Dimensiuni și culori ale titlurilor (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)

Folosiți `color="secondary"` pentru titluri mai puțin proeminente. `tertiary` este de asemenea disponibil, dar contrastul său depinde de dimensiunea fontului, temă și fundal. Verificați lizibilitatea atunci când îl folosiți.

Atributele native, stilurile, numele claselor și referințele sunt transmise titlului. Folosiți `render` pentru a compune cu un element sau o componentă personalizată; acel element este responsabil pentru păstrarea semanticii titlului.

Pentru un titlu cu text de susținere sau acțiuni, utilizați [Section](https://docs.twenty.com/ro/ui/components/layout/section.md).

## Proprietăți

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