<template>
  <div class="style-guide">
    <h1>Styleguide</h1>
    <h1 class="style-guide__main-title">Main Title - 64px Bold - 700</h1>
    <h2 class="style-guide__heading-1">Title 1 - 44px Semibold - 600</h2>
    <h3 class="style-guide__heading-2">Title 2 - 34px Semibold- 600</h3>
    <h4 class="style-guide__heading-3">Title 3 - 22px Semibold - 600</h4>
    <h5 class="style-guide__heading-4">Title 4 - 18px Semibold - 600</h5>
    <p class="style-guide__regular-text">Text - 18px Regular - 400</p>
    <p class="style-guide__small-text">Text Small - 16px Regular - 400</p>
    <h2 class="style-guide__meta-title">Meta Title - 42px Book</h2>
    <p class="style-guide__lead-paragraph">
      Lead paragraph - 26px<br />
      Vor wenigen Monaten haben Sie Ihren ersten Lohn bekommen – ein befriedigendes Gefühl, für seine Arbeit Geld zu
      erhalten.
    </p>
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';

.style-guide {
  &__main-title {
    @include main-title;
  }

  &__heading-1 {
    @include heading-1;
  }
  &__heading-2 {
    @include heading-2;
  }
  &__heading-3 {
    @include heading-3;
  }
  &__heading-4 {
    @include heading-4;
  }
  &__regular-text {
    @include regular-text;
  }
  &__small-text {
    @include small-text;
  }
  &__meta-title {
    @include meta-title;
  }
  &__lead-paragraph {
    @include lead-paragraph;
  }
}
</style>
