Heading

Displays a basic heading element.

No props data available for Heading.

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

Use the align prop to set text alignment. You can change the alignment across breakpoints using the object syntax.

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

You can change the size across breakpoints using the object syntax.

Heading sizes match Text sizes. However, the line heights and letter spacing are set tighter.

Use the trim prop to trim the leading space at the start, end, or both sides of the text box. You can change the leading trim across breakpoints using the object syntax.

The prop works similarly to the upcoming half-leading control spec, but uses a common negative margin workaround under the hood for cross-browser support.

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

Context

Usage

Used 220 times across 2 packages

Dashboard
164
Admin Portal
56

Variant Distribution

size

1
2%
2
16%
3
21%
4
33%
5
9%
6
15%
7
3%
8
0%

color

red
83%
gray
17%

align

center
100%

weight

bold
55%
regular
27%
medium
18%

trim

both
43%
start
29%
end
29%

wrap

balance
93%
nowrap
7%

highContrast

true
100%

Where it's used

129 files

/:environmentId/authentication

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/authentication/authentication-legacy.tsx12

/:environmentId/applications

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/applications/create-application-dialog.tsx7
packages/dashboard/src/components/self-service-slack-channel/self-service-slack-channel.tsx7
packages/dashboard/src/components/ai-chat/markdown-renderer.tsx6
packages/dashboard/src/components/branding/emails-page-mock.tsx6
packages/dashboard/src/components/users/user-details.tsx6
packages/admin-portal/src/mdx-components.tsx6
packages/dashboard/src/components/events/events-table/event-detail-payload.tsx4
packages/dashboard/src/legacy-pages/[environmentId]/organizations/[organizationId]/features.tsx4

/:environmentId/applications/:applicationId

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/applications/[applicationId]/application-view.tsx3

Show 119 more files