Heading

import {Container} from '@sentry/scraps/layout'; import {Heading} from '@sentry/scraps/text';

import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/text/heading');

The <Heading> component creates semantic heading elements with appropriate default sizes and styling. It ensures proper heading hierarchy while providing visual consistency.

jsx

<Heading as="h1">Page Title</Heading>
<Heading as="h2">Section Title</Heading>
<Heading as="h3">Subsection Title</Heading>

Semantic Heading Levels

Use the required as prop to specify the semantic heading level. Each level has a default size that follows standard typography hierarchy.

<Storybook.Demo> <Storybook.SideBySide vertical> <Heading as="h1">Heading 1</Heading> <Heading as="h2">Heading 2</Heading> <Heading as="h3">Heading 3</Heading> <Heading as="h4">Heading 4</Heading> <Heading as="h5">Heading 5</Heading> <Heading as="h6">Heading 6</Heading> </Storybook.SideBySide> </Storybook.Demo>

jsx

<Heading as="h1">Heading 1</Heading>
<Heading as="h2">Heading 2</Heading>
<Heading as="h3">Heading 3</Heading>
<Heading as="h4">Heading 4</Heading>
<Heading as="h5">Heading 5</Heading>
<Heading as="h6">Heading 6</Heading>

Custom Sizes

Override the default size with the size prop to decouple visual appearance from semantic meaning.

Heading supports up to 4xl as opposed to Text which only allows 2xl.

<Storybook.Demo> <Storybook.SideBySide vertical> <Heading as="h2" size="4xl"> H2 with 4xl size </Heading> <Heading as="h1" size="md"> H1 with medium size </Heading> <Heading as="h5" size="xl"> H5 with extra large size </Heading> <Heading as="h3" size="3xl"> H3 with 3xl size </Heading> <Heading as="h6" size={{'screen:md': 'xs', 'screen:lg': 'xl'}}> H6 with responsive size </Heading> </Storybook.SideBySide> </Storybook.Demo>

jsx

<Heading as="h2" size="4xl">
  H2 with 4xl size
</Heading>
<Heading as="h1" size="md">
  H1 with medium size
</Heading>
<Heading as="h5" size="xl">
  H5 with extra large size
</Heading>
<Heading as="h3" size="3xl">
  H3 with 3xl size
</Heading>
<Heading as="h6" size={{'screen:md': 'xs', 'screen:lg': 'xl'}}>
  H6 with responsive size
</Heading>

Variants

Headings support various color variants: primary (default), muted, accent, success, warning, danger, and promotion.

<Storybook.Demo> <Storybook.SideBySide vertical> <Heading as="h3" variant="primary"> Primary heading (default) </Heading> <Heading as="h3" variant="muted"> Muted heading </Heading> <Heading as="h3" variant="accent"> Accent heading </Heading> <Heading as="h3" variant="success"> Success heading </Heading> <Heading as="h3" variant="warning"> Warning heading </Heading> <Heading as="h3" variant="danger"> Danger heading </Heading> <Heading as="h3" variant="promotion"> Promotion heading </Heading> </Storybook.SideBySide> </Storybook.Demo>

jsx

<Heading as="h3" variant="primary">
  Primary heading (default)
</Heading>
<Heading as="h3" variant="muted">
  Muted heading
</Heading>
<Heading as="h3" variant="accent">
  Accent heading
</Heading>
<Heading as="h3" variant="success">
  Success heading
</Heading>
<Heading as="h3" variant="warning">
  Warning heading
</Heading>
<Heading as="h3" variant="danger">
  Danger heading
</Heading>
<Heading as="h3" variant="promotion">
  Promotion heading
</Heading>

Typography Features

Headings support various typography options including italic, underline and strikethrough.

<Storybook.Demo> <Storybook.SideBySide vertical> <Heading as="h3" italic> Italic heading </Heading> <Heading as="h3" underline> Underlined heading </Heading> <Heading as="h3" strikethrough> Strikethrough heading </Heading> <Heading as="h3" italic underline> Italic underlined heading </Heading> </Storybook.SideBySide> </Storybook.Demo>

jsx

<Heading as="h3" italic>
  Italic heading
</Heading>
<Heading as="h3" underline>
  Underlined heading
</Heading>
<Heading as="h3" strikethrough>
  Strikethrough heading
</Heading>
<Heading as="h3" italic underline>
  Italic underlined heading
</Heading>

Text Alignment

Control text alignment with the align prop: left (default), center, right, or justify.

<Storybook.Demo> <Storybook.SideBySide vertical> <div style={{width: '300px', border: '1px solid #ccc', padding: '8px'}}> <Heading as="h4" align="left"> Left aligned heading </Heading> </div> <div style={{width: '300px', border: '1px solid #ccc', padding: '8px'}}> <Heading as="h4" align="center"> Center aligned heading </Heading> </div> <div style={{width: '300px', border: '1px solid #ccc', padding: '8px'}}> <Heading as="h4" align="right"> Right aligned heading </Heading> </div> </Storybook.SideBySide> </Storybook.Demo>

jsx

<Heading as="h4" align="left">
  Left aligned heading
</Heading>
<Heading as="h4" align="center">
  Center aligned heading
</Heading>
<Heading as="h4" align="right">
  Right aligned heading
</Heading>

Ellipsis Overflow

Handle text overflow with the ellipsis prop to truncate long headings with an ellipsis.

<Storybook.Demo> <Container width="200px" border="primary" padding="md"> <Heading as="h4" ellipsis> This is a very long heading that will be truncated </Heading> </Container> </Storybook.Demo>

jsx

<Heading as="h4" ellipsis>
  This is a very long heading that will be truncated
</Heading>

Monospace

Use monospace for fixed-width headings, useful for code-related content.

<Storybook.Demo> <Storybook.SideBySide vertical> <Heading as="h4">API Response Format</Heading> <Heading as="h4" monospace> API Response Format </Heading> </Storybook.SideBySide> </Storybook.Demo>

jsx

<Heading as="h4">API Response Format</Heading>
<Heading as="h4" monospace>
  API Response Format
</Heading>

Responsive Sizes

Headings support responsive sizes using breakpoint objects. Breakpoints are: xs, sm, md, lg, xl, 2xl.

<Storybook.Demo> <Container width="400px" border="primary"> <Heading as="h4" size={{ 'screen:xs': 'xs', 'screen:sm': 'sm', 'screen:md': 'md', 'screen:lg': 'lg', 'screen:xl': 'xl', }} align={{ 'screen:xs': 'left', 'screen:sm': 'center', 'screen:md': 'right', 'screen:lg': 'justify', 'screen:xl': 'left', }} > Responsive heading </Heading> </Container> </Storybook.Demo>

jsx

<Heading
  as="h4"
  size={{
    'screen:xs': 'xs',
    'screen:sm': 'sm',
    'screen:md': 'md',
    'screen:lg': 'lg',
    'screen:xl': 'xl',
  }}
  align={{
    'screen:xs': 'left',
    'screen:sm': 'center',
    'screen:md': 'right',
    'screen:lg': 'justify',
    'screen:xl': 'left',
  }}
>
  Responsive heading
</Heading>