What is variant field in heading component and how is it different from as field

[jdesai321]

As title mentions, a heading component has both as and variant field, whats the use of variant property if we have as field?

<Heading as="h2" variant="heading20"> Heading Two </Heading>

[SiTaggart]

Hi @jdesai321

Simply put, visual hierarchy doesn't always follow document hierarchy in single page apps. So we decouple the visual appearance, via a variant, from the semantic hierarchy of the element to render as.

For accessibility reasons we want to create a nice clean document hierarchy where:

• We only have one h1
• We don't skip levels as we travel the DOM

h1
  h2
    h3
    h3
  h2
  h2
    h3
    h3
      h4

Sometimes, the appropriate document level doesn't match the visual design, because, for example, the third section of content is less important than the previous two, but at the same logical level of document hierarchy.

By decoupling visual appearance from hierarchy, we enable designers and engineers to create visual and semantic hierarchy correctly for all users.