Default

The default styling for any element that uses the heading class.

Small

The smallest heading style available. Should be used for minor headings that do not need to stand out a lot

Large

Slightly larger than the default heading style.

Huge

The largest heading style available. In most cases this should only be used once per page to style the main or most important heading on the page.

<h1 class="heading heading--small">
    Worldwide trade in Swiss Francs
</h1>
<{{#if tagName}}{{tagName}}{{else}}h1{{/if}} class="heading {{modifier}}">
    {{label}}
</{{#if tagName}}{{tagName}}{{else}}h1{{/if}}>
{
  "label": "Worldwide trade in Swiss Francs",
  "tagName": "h1",
  "modifier": "heading--small"
}