# Headings

Consistent heading display styles across our products

# How to

These heading classes are meant to help you separate styling (font size, color and weight) from the semantic markup on the page that provides larger meaning for the browser, screen readers and search engines.

Whenever possible, the styling should be attached to the element (h1 - h6, p, span or div) that makes the most sense for the page's overall hierarchy (opens new window).

However, sometimes this element has inherent styling that conflicts with the Skyline styles.

In this case:

  1. Attach the class to a div or span that carries no other styles and,
  2. Use the Implementation Requirements markup as a guide for providing accessible markup (opens new window) that still provides the semantic meaning to screen readers.

# Examples

Why do these look different?

Why do these look different?

Check out the Typography section to see how we've updated heading and text styles in Skyline

# Display Variants

# API for Vue Components

# SkyDisplay

Props
Slots