Heading

Represents a heading text

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

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>

level (default: "h1")

This property sets the visual significance (level) of the heading.

Available values: h1 (default), h2, h3, h4, h5, h6

For a visual example, see the component description.

maxLines

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

<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

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>

You can observe the effect of using preserveLinebreaks:

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>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables