# Headings
Consistent typography 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:
- Attach the class to a
divorspanthat carries no other styles and, - 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
# Display Variants
# Text Variants
# API for Vue Components
# SkyDisplay
Props
Slots
# SkyText
Props
Slots