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

# Heading

> Render semantic headings with independent visual sizes.

export const StoryEmbed = ({storyId, title, height = 120}) => <>
    <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" allow="clipboard-write" 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" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`Heading` renders an `h2` by default. Use `children` for its content, `level` for document structure, and `size` for appearance.

<StoryEmbed storyId="ui-typography-heading--display" title="Heading example" height={90} />

## Usage

Choose levels in document order. A smaller visual size does not change the level announced by assistive technology.

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

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

Sizes `xs`, `sm`, `md`, `lg`, `xl`, and `xxl` use the matching font tokens. The larger sizes use `1.54rem` and `1.85rem`, respectively. All sizes keep semibold weight and a `1.1` line height. `Section.Header` and `Dialog.Title` accept the same size values. Headings have no outer margin; their surrounding layout owns spacing.

## Color and composition

<StoryEmbed storyId="ui-typography-heading--catalog" title="Heading sizes and colors" height={480} />

Use `color="secondary"` for less prominent headings. `tertiary` is also available, but its contrast depends on the font size, theme, and background. Check readability when using it.

Native attributes, styles, class names, and refs pass to the heading. Use `render` to compose with a custom element or component; that element is responsible for preserving heading semantics.

For a heading with supporting text or actions, use [Section](/ui/components/layout/section).

## Props

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

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

<ParamField body="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="size" type="&#x22;lg&#x22; | &#x22;md&#x22; | &#x22;sm&#x22; | &#x22;xl&#x22; | &#x22;xs&#x22; | &#x22;xxl&#x22;" default="md">
  Visual font size from `xs` through `xxl`, independent of the heading level. Uses the matching font token. Defaults to `md`.
</ParamField>


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