52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<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>
|