{{#> web/layout/default title="Typography" parentPageName="Helpers" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Typography headings</h2>

    <div class="docs-Stack docs-Stack--start">

      <p class="typography-heading-xlarge-regular">Heading XLarge Regular</p>
      <p class="typography-heading-xlarge-semibold">Heading XLarge Semibold</p>
      <p class="typography-heading-xlarge-bold">Heading XLarge Bold</p>
      <p class="typography-heading-xlarge-italic">Heading XLarge Italic</p>
      <p class="typography-heading-large-regular">Heading Large Regular</p>
      <p class="typography-heading-large-semibold">Heading Large Semibold</p>
      <p class="typography-heading-large-bold">Heading Large Bold</p>
      <p class="typography-heading-large-italic">Heading Large Italic</p>
      <p class="typography-heading-medium-regular">Heading Medium Regular</p>
      <p class="typography-heading-medium-semibold">Heading Medium Semibold</p>
      <p class="typography-heading-medium-bold">Heading Medium Bold</p>
      <p class="typography-heading-medium-italic">Heading Medium Italic</p>
      <p class="typography-heading-small-regular">Heading Small Regular</p>
      <p class="typography-heading-small-semibold">Heading Small Semibold</p>
      <p class="typography-heading-small-bold">Heading Small Bold</p>
      <p class="typography-heading-small-italic">Heading Small Italic</p>
      <p class="typography-heading-xsmall-regular">Heading XSmall Regular</p>
      <p class="typography-heading-xsmall-semibold">Heading XSmall Semibold</p>
      <p class="typography-heading-xsmall-bold">Heading XSmall Bold</p>
      <p class="typography-heading-xsmall-italic">Heading XSmall Italic</p>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Typography body</h2>

    <div class="docs-Stack docs-Stack--start">

      <p class="typography-body-xlarge-regular">Body XLarge Regular</p>
      <p class="typography-body-xlarge-semibold">Body XLarge Semibold</p>
      <p class="typography-body-xlarge-bold">Body XLarge Bold</p>
      <p class="typography-body-xlarge-italic">Body XLarge Italic</p>
      <p class="typography-body-large-regular">Body Large Regular</p>
      <p class="typography-body-large-semibold">Body Large Semibold</p>
      <p class="typography-body-large-bold">Body Large Bold</p>
      <p class="typography-body-large-italic">Body Large Italic</p>
      <p class="typography-body-medium-regular">Body Medium Regular</p>
      <p class="typography-body-medium-semibold">Body Medium Semibold</p>
      <p class="typography-body-medium-bold">Body Medium Bold</p>
      <p class="typography-body-medium-italic">Body Medium Italic</p>
      <p class="typography-body-small-regular">Body Small Regular</p>
      <p class="typography-body-small-semibold">Body Small Semibold</p>
      <p class="typography-body-small-bold">Body Small Bold</p>
      <p class="typography-body-small-italic">Body Small Italic</p>
      <p class="typography-body-xsmall-regular">Body XSmall Regular</p>
      <p class="typography-body-xsmall-semibold">Body XSmall Semibold</p>
      <p class="typography-body-xsmall-bold">Body XSmall Bold</p>
      <p class="typography-body-xsmall-italic">Body XSmall Italic</p>

    </div>

  </div>

</section>

{{/web/layout/default}}
