title: Headings
label: Headings
status: live
context:
  component-type: element
variants:
  - name: default
    hidden: true
  - name: 1-display
    context:
      type: 1
      heading: This heading size is extra large and inverted
      style: invert
      tags: h1
  - name: 2-extra-large
    context:
      type: 2
      heading: This heading size is extra large
      tags: h1
  - name: 3-large
    context:
      type: 3
      heading: This heading size is large
      tags: h2
  - name: 4-regular
    context:
      type: 4
      heading: This heading size is regular
      tags: h3
  - name: 5-small
    context:
      type: 5
      heading: This heading size is small
      tags: h4
