# Heading

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<Heading>The quick brown fox jumps over the lazy dog</Heading>
```

## API Reference

This component is based on the `h1` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop                                                                                                                                                                   | Type                                                      | Default |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------- |
| `as`Shorthand for changing the default rendered element into a semantically appropriate alternative. Cannot be used in combination with `asChild`.                     | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`            | `"h1"`  |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                                                 | —       |
| `size`                                                                                                                                                                 | `Responsive<enum>`                                        | `"6"`   |
| `weight`                                                                                                                                                               | `Responsive<"light" \| "regular" \| "medium" \| "bold">`  | —       |
| `align`Sets the CSS [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) property.                                                                | `Responsive<"left" \| "center" \| "right">`               | —       |
| `trim`Trims the leading whitespace from the start or end of the text.                                                                                                  | `Responsive<"normal" \| "start" \| "end" \| "both">`      | —       |
| `truncate`Truncates text with an ellipsis. Be aware of [common pitfalls](https://css-tricks.com/flexbox-truncated-text/) in flex layouts.                              | `boolean`                                                 | —       |
| `wrap`Controls the wrapping behavior of the text. See the corresponding [text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) values for details.    | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | —       |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details.                                          | `enum`                                                    | —       |
| `highContrast`Uses a higher contrast color for the component.                                                                                                          | `boolean`                                                 | —       |

## Examples

### As another element

Use the `as` prop to change the heading level. This prop is purely semantic and does not change the visual appearance.

```jsx
<>

<Heading as="h1">Level 1</Heading>

<Heading as="h2">Level 2</Heading>

<Heading as="h3">Level 3</Heading>

</>;
```

### Size

Use the `size` prop to control the size of the heading. The prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.

Heading sizes match [Text](/themes/docs/components/text) sizes. However, the line heights are set a bit tighter as headings tend to be shorter than running text.

```jsx
<Flex direction="column" gap="3">

	<Heading size="1">The quick brown fox jumps over the lazy dog</Heading>

	<Heading size="2">The quick brown fox jumps over the lazy dog</Heading>

	<Heading size="3">The quick brown fox jumps over the lazy dog</Heading>

	<Heading size="4">The quick brown fox jumps over the lazy dog</Heading>

	<Heading size="5">The quick brown fox jumps over the lazy dog</Heading>

	<Heading size="6">The quick brown fox jumps over the lazy dog</Heading>

	<Heading size="7">The quick brown fox jumps over the lazy dog</Heading>

	<Heading size="8">The quick brown fox jumps over the lazy dog</Heading>

	<Heading size="9">The quick brown fox jumps over the lazy dog</Heading>

</Flex>
```

### Weight

Use the `weight` prop to set the text weight.

```jsx
<>

<Heading weight="regular">

  The quick brown fox jumps over the lazy dog.

</Heading>



<Heading weight="medium">

  The quick brown fox jumps over the lazy dog.

</Heading>



<Heading weight="bold">

  The quick brown fox jumps over the lazy dog.

</Heading>

</>;
```

### Align

Use the `align` prop to set text alignment.

```jsx
<>

<Heading align="left">Left-aligned</Heading>

<Heading align="center">Center-aligned</Heading>

<Heading align="right">Right-aligned</Heading>

</>;
```

### Trim

Use the `trim` prop to trim the leading space at the start, end, or both sides of the text box.

The prop works similarly to the upcoming [half-leading control](https://www.w3.org/TR/css-inline-3/#leading-trim) spec, but uses a common [negative margin workaround](https://seek-oss.github.io/capsize/) under the hood for cross-browser support.

```jsx
<Flex direction="column" gap="3">

	<Heading trim="normal" style={{
      "background": "var(--gray-a2)",
      "border-top": "1px dashed var(--gray-a7)",
      "border-bottom": "1px dashed var(--gray-a7)"
    }}>

		Without trim

	</Heading>

	<Heading trim="both" style={{
      "background": "var(--gray-a2)",
      "border-top": "1px dashed var(--gray-a7)",
      "border-bottom": "1px dashed var(--gray-a7)"
    }}>

		With trim

	</Heading>

</Flex>
```

Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides.

```jsx
<Flex direction="column" gap="3">

	<Box style={{
      "background": "var(--gray-a2)",
      "border": "1px dashed var(--gray-a7)"
    }} p="4">

		<Heading mb="1" size="3">

			Without trim

		</Heading>

		<Text>

			The goal of typography is to relate font size, line height, and line width

			in a proportional way that maximizes beauty and makes reading easier and

			more pleasant.

		</Text>

	</Box>



	<Box p="4" style={{
      "background": "var(--gray-a2)",
      "border": "1px dashed var(--gray-a7)"
    }}>

		<Heading mb="1" size="3" trim="start">

			With trim

		</Heading>

		<Text trim="end">

			The goal of typography is to relate font size, line height, and line width

			in a proportional way that maximizes beauty and makes reading easier and

			more pleasant.

		</Text>

	</Box>

</Flex>
```

The default trim values are configured for the system font stack that’s used by Radix Themes. If you are using custom fonts, you can [adjust](/themes/docs/theme/typography#customization) the trim values using the corresponding CSS variables.

```css
.radix-themes {

	--default-leading-trim-start: 0.42em;

	--default-leading-trim-end: 0.36em;

	--heading-leading-trim-start: 0.42em;

	--heading-leading-trim-end: 0.36em;

}
```

### Truncate

Use the `truncate` prop to truncate text with an ellipsis when it overflows its container.

```jsx
<Flex maxWidth="300px">

	<Heading truncate>The quick brown fox jumps over the lazy dog</Heading>

</Flex>
```

### Wrap

Use the `wrap` prop to control text wrapping.

```jsx
<Flex maxWidth="300px">

	<Heading wrap="nowrap">The quick brown fox jumps over the lazy dog</Heading>

</Flex>
```

```jsx
<Flex maxWidth="300px">

	<Heading wrap="balance">The quick brown fox jumps over the lazy dog</Heading>

</Flex>
```

```jsx
<Flex maxWidth="300px">

	<Heading wrap="pretty">The quick brown fox jumps over the lazy dog</Heading>

</Flex>
```

`text-wrap: pretty` is an experimental value that is [not yet supported in all browsers](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#browser_compatibility). However, it can be treated as a progressive enhancement for browsers that do support it.

### Color

Use the `color` prop to assign a specific [color](/themes/docs/theme/color). The text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.

```jsx
<Flex direction="column">

	<Heading color="indigo">The quick brown fox jumps over the lazy dog</Heading>

	<Heading color="cyan">The quick brown fox jumps over the lazy dog</Heading>

	<Heading color="orange">The quick brown fox jumps over the lazy dog</Heading>

	<Heading color="crimson">The quick brown fox jumps over the lazy dog</Heading>

</Flex>
```

### High-contrast

Use the `highContrast` prop to increase color contrast with the background.

```jsx
<Flex direction="column">

	<Heading color="gray">The quick brown fox jumps over the lazy dog.</Heading>

	<Heading color="gray" highContrast>

		The quick brown fox jumps over the lazy dog.

	</Heading>

</Flex>
```