Skip to content

Heading

Properties

PropertiesDescription
text or children(required) a heading, can be text or React.Node.
size(optional) Define the typography font-size by a size type, e.g. x-large. Defaults to the predefined heading sizes.
increase(optional) If set to true, the heading level will be incremented by 1.
decrease(optional) If set to true, the heading level will be decremented by 1.
inherit(optional) If set to true, the heading last used level will be inherited. Also from inside a level context.
reset(optional) If set to true, the heading level will be reset to 2. You can give it a custom level if you need to, e.g. reset(1).
skip_correction(optional) If set to true, the heading will not be corrected and warnings will not be shown. Warnings do not show up in production builds else either.
debug(optional) If set to true, the content will have a prefix, showing the heading level.
debug_counter(optional) If set to true, the content will have both a prefix and a JSON log attached to both headings and level contexts.
element(optional) define what HTML element should be used. If you use, e.g. a span, then role="heading" and aria-level gets set. Defaults to semantic heading element.
skeleton(optional) if set to true, an overlaying skeleton with animation will be shown.
Space(optional) spacing properties like top or bottom are supported.

Properties which do apply to the provider (level context) Heading.Level as well:

  • increase
  • decrease
  • inherit
  • reset
  • skip_correction
  • debug