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.
sx prop can be provided a value to over-ride the component styles.
h100 are available.
h6 are available; by default,
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.
Please reference the w3 recommendations for headings to ensure your headings provide an accessible experience for screen readers.
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.
<Spacer> in these cases.