Heading

Heading displays hierarchical text headings with semantic importance levels from H1 to H6, following HTML heading standards. It provides text overflow handling, anchor link generation, and integrates with TableOfContents.

Key features:

• Semantic levels: Choose from h1 through h6 for proper document structure and accessibility
• Text overflow control: Automatic ellipses and line limiting for long headings
• Anchor generation: Optional hover anchors for deep linking to specific sections

For the shorthand versions see: H1, H2, H3, H4, H5, H6.

<App>
  <Heading level="h1" value="Heading Level 1" />
  <Text>Text following H1</Text>
  <Heading level="h2" value="Heading Level 2" />
  <Text>Text following H2</Text>
  <Heading level="h3" value="Heading Level 3" />
  <Text>Text following H3</Text>
  <Heading level="h4" value="Heading Level 4" />
  <Text>Text following H4</Text>
  <Heading level="h5" value="Heading Level 5" />
  <Text>Text following H5</Text>
  <Heading level="h6" value="Heading Level 6" />
  <Text>Text following H6</Text>
</App>

<App>
  <Heading level="h1" value="Heading Level 1" />
  <Text>Text following H1</Text>
  <Heading level="h2" value="Heading Level 2" />
  <Text>Text following H2</Text>
  <Heading level="h3" value="Heading Level 3" />
  <Text>Text following H3</Text>
  <Heading level="h4" value="Heading Level 4" />
  <Text>Text following H4</Text>
  <Heading level="h5" value="Heading Level 5" />
  <Text>Text following H5</Text>
  <Heading level="h6" value="Heading Level 6" />
  <Text>Text following H6</Text>
</App>

Behaviors

This component supports the following behaviors:

Properties

ellipses

default: true

This property indicates whether ellipses should be displayed (true) when the heading text is cropped or not (false).

<App>
  <VStack width="200px">
    <H3
      backgroundColor="cyan"
      maxLines="1"
      ellipses="false">
      Though this long text does is about to crop!
    </H3>
    <H3
      backgroundColor="cyan"
      maxLines="1">
      Though this long text does is about to crop!
    </H3>
  </VStack>
</App>

<App>
  <VStack width="200px">
    <H3
      backgroundColor="cyan"
      maxLines="1"
      ellipses="false">
      Though this long text does is about to crop!
    </H3>
    <H3
      backgroundColor="cyan"
      maxLines="1">
      Though this long text does is about to crop!
    </H3>
  </VStack>
</App>

level

default: "h1"

This property sets the visual significance (level) of the heading. Accepts multiple formats: h1-h6, H1-H6, or 1-6.Invalid values default to h1.

Available values: h1 (default), h2, h3, h4, h5, h6, H1, H2, H3, H4, H5, H6, 1, 2, 3, 4, 5, 6

For a visual example, see the component description.

maxLines

This optional property determines the maximum number of lines the component can wrap to. If there is not enough space for all of the text, the component wraps the text up to as many lines as specified. If the value is not specified, there is no limit on the number of displayed lines.

<App>
  <H2
    maxWidth="160px"
    backgroundColor="cyan"
    value="A long heading text that will likely overflow" maxLines="2" />
</App>

<App>
  <H2
    maxWidth="160px"
    backgroundColor="cyan"
    value="A long heading text that will likely overflow" maxLines="2" />
</App>

omitFromToc

default: false

If true, this heading will be excluded from the table of contents.

preserveLinebreaks

default: false

This property indicates whether linebreaks should be preserved when displaying text.

<App>
  <HStack>
    <H3
      width="200px"
      backgroundColor="cyan"
      preserveLinebreaks="true"
      value="(preserve) This long text
  with several line breaks
          does not fit into a viewport with a 200-pixel width." />
    <H3
      width="200px"
      backgroundColor="cyan"
      value="(do not preserve) This long text
  with several line breaks
          does not fit into a viewport with a 200-pixel width." />
  </HStack>
</App>

<App>
  <HStack>
    <H3
      width="200px"
      backgroundColor="cyan"
      preserveLinebreaks="true"
      value="(preserve) This long text
  with several line breaks
          does not fit into a viewport with a 200-pixel width." />
    <H3
      width="200px"
      backgroundColor="cyan"
      value="(do not preserve) This long text
  with several line breaks
          does not fit into a viewport with a 200-pixel width." />
  </HStack>
</App>

Remember to use the value property of Heading. Linebreaks are converted to spaces when nesting the text in the Heading component.

showAnchor

default: false

This property indicates whether an anchor link should be displayed next to the heading. If set to true, an anchor link will be displayed on hover next to the heading.

If this property is not set, the engine checks if showHeadingAnchors flag is turned on in the global configuration (in the appGlobals configuration object) and displays the heading anchor accordingly.

value

This property determines the text displayed in the heading. Heading also accepts nested text instead of specifying the value. If both value and a nested text are used, the value will be displayed.

<App>
  <Heading value="This is level 3 (value)" level="h3" />
  <Heading level="h3">This is level 3 (child)</Heading>
  <Heading value="Value" level="h3"><Icon name="trash" /></Heading>
</App>

<App>
  <Heading value="This is level 3 (value)" level="h3" />
  <Heading level="h3">This is level 3 (child)</Heading>
  <Heading value="Value" level="h3"><Icon name="trash" /></Heading>
</App>

Events

This component does not have any events.

Exposed Methods

hasOverflow

Returns true when the displayed text overflows the bounds of this heading component.

Signature: hasOverflow()

scrollIntoView

Scrolls the heading into view.

Signature: scrollIntoView()

Styling

Theme Variables