<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>
