The Heading component is a typography component used to display text in different sizes and formats.
Fuegokit's Heading component renders an html h2 tag with the "h800" variant styles applied by default, including color.
The sx prop can be provided a value to over-ride the component styles.
Heading variants h900 - h100 are available.
Heading levels h1 - h6 are available; by default, h800
When passing a semantic element, it should be done in a way that is consistent with the component's intended use, such as cases where accessibility will be improved by using semantically appropriate HTML elements.
Heading levels available through the level prop that adhere to the product experience spec in the host environment.
Accessibility
Please reference the w3 recommendations for headings to ensure your headings provide an accessible experience for screen readers.
Margin
The Heading component does not render margin by default.
Margin breaks encapsulation and makes reusability harder; good components should be usable in any context or layout in surprising and hard to manage ways.
However, vertical space is often called for above a Header in both long-form, text-based layouts and in the product environment UI.
Prefer <Spacer> in these cases.