Spartherm

Typography 

<div class="container">
    <div class="desc desc-line mt-5">Typeface</div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="typeface font-light">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Light</div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="typeface font-regular">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Regular</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="typeface font-medium">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Medium</div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="typeface font-semibold">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Semi Bold</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="typeface font-bold">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Bold</div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="typeface font-extrabold">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Extra Bold</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="typeface font-black">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Black</div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="typeface font-italic">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc font-normal">Mazzard M Italic</div>
            </div>
        </div>
    </div>

    <div class="desc desc-line mt-5">Specifications</div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">h1, .h1</code></pre>
        <h1>Head H1</h1>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">h2, .h2</code></pre>
        <h2>Head H2</h2>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">h3, .h3</code></pre>
        <h3>Head H3</h3>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">h4, .h4</code></pre>
        <h4>Head H4</h4>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">h5, .h5</code></pre>
        <h5>Head H5</h5>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">button, .btn, .btn-flat, .btn-outlined</code></pre>
        <div class="text-btn">Buttons Flat, Buttons Outlined</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.btn-contained, a > img</code></pre>
        <div class="text-btn-contained">Buttons Contained, Image Elements</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">p</code></pre>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.title</code></pre>
        <div class="title">Element I</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.headline</code></pre>
        <div class="headline">Element II</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.subline</code></pre>
        <div class="subline">Element III</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.producthead</code></pre>
        <div class="producthead">Producthead</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.footerline</code></pre>
        <div class="footerline">Formular and Footer</div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="desc desc-line mt-5">Glyphs</div>
            <p>x # $ € – <> » « © ® Ø [ ] { } | → ← „ “ ‘</p>
        </div>
        <div class="col-12 col-lg-6">
            <div class="desc desc-line mt-5">Numbers</div>
            <p>0 1 2 3 4 5 6 7 8 9</p>
        </div>
    </div>

</div>

<style>
    .typeface {
        border-bottom: 2px solid #707070;
        margin-bottom: 2em;
    }

    .typeface .char {
        font-size: 60px;
        float: left;
        margin-right: 30px;
    }

    .typeface p {
        font-size: 1rem;
        font-weight: inherit;
    }

    .text-btn {
        text-transform: uppercase;
        font-size: 1.125rem;
        font-weight: 400;
        line-heigh: 1.25;
        letter-spacing: 0.0225rem;
    }

    .text-btn-contained {
        text-transform: uppercase;
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.375;
    }

    .dark .char,
    .dark .text-btn,
    .dark .text-btn-contained {
        color: #fff;
    }
</style>
 
<div class="container">
    <div class="desc desc-line mt-5">Typeface</div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="typeface font-light">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Light</div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="typeface font-regular">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Regular</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="typeface font-medium">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Medium</div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="typeface font-semibold">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Semi Bold</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="typeface font-bold">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Bold</div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="typeface font-extrabold">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Extra Bold</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="typeface font-black">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc">Mazzard M Black</div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="typeface font-italic">
                <div class="char">Aa</div>
                <p>AaBbCcDdEeFfGgHh<br>IiJjKkLlMmNnOoPp<br>QqRrTtUuVvWwXxYyZz<br>123456789!@#$%</p>
                <div class="desc font-normal">Mazzard M Italic</div>
            </div>
        </div>
    </div>

    <div class="desc desc-line mt-5">Specifications</div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">h1, .h1</code></pre>
        <h1>Head H1</h1>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">h2, .h2</code></pre>
        <h2>Head H2</h2>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">h3, .h3</code></pre>
        <h3>Head H3</h3>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">h4, .h4</code></pre>
        <h4>Head H4</h4>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">h5, .h5</code></pre>
        <h5>Head H5</h5>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">button, .btn, .btn-flat, .btn-outlined</code></pre>
        <div class="text-btn">Buttons Flat, Buttons Outlined</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.btn-contained, a > img</code></pre>
        <div class="text-btn-contained">Buttons Contained, Image Elements</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">p</code></pre>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.title</code></pre>
        <div class="title">Element I</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.headline</code></pre>
        <div class="headline">Element II</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.subline</code></pre>
        <div class="subline">Element III</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.producthead</code></pre>
        <div class="producthead">Producthead</div>
    </div>
    <div class="border-bottom my-4">
        <pre class="mb-1"><code class="css">.footerline</code></pre>
        <div class="footerline">Formular and Footer</div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="desc desc-line mt-5">Glyphs</div>
            <p>x # $ € – < > » « © ® Ø [ ] { } | → ← „ “ ‘</p>
        </div>
        <div class="col-12 col-lg-6">
            <div class="desc desc-line mt-5">Numbers</div>
            <p>0 1 2 3 4 5 6 7 8 9</p>
        </div>
    </div>

</div>

<style>
    .typeface {
        border-bottom: 2px solid #707070;
        margin-bottom: 2em;
    }
    .typeface .char {
        font-size: 60px;
        float: left;
        margin-right: 30px;
    }
    .typeface p {
        font-size: 1rem;
        font-weight: inherit;
    }
    .text-btn {
        text-transform: uppercase;
        font-size: 1.125rem;
        font-weight: 400;
        line-heigh: 1.25;
        letter-spacing: 0.0225rem;
    }
    .text-btn-contained {
        text-transform: uppercase;
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.375;
    }
    .dark .char, .dark .text-btn, .dark .text-btn-contained {
        color: #fff;
    }
</style>
 
/* Kein Inhalt definiert. */
  • Inhalt: 
    p {
  font-weight: $font-weight-light;
  .dark & {
    color: $white;
  }
}

strong, .strong {
  font-weight: $font-weight-bold;
}

h1, .h1 {
  font-size: $h1-font-size;
  font-weight: $font-weight-bolder;
  text-transform: uppercase;
  letter-spacing: 0.09375rem;
  .dark & {
    color: $light;
  }
}
h2, .h2 {
  font-size: $h2-font-size;
  font-weight: $font-weight-black;
  color: $dark;
  text-transform: uppercase;
  letter-spacing: 0.045rem;
  .dark & {
    color: $light;
  }
}
h3, .h3 {
  font-size: $h3-font-size;
  font-weight: $font-weight-bold;
  color: $secondary;
  text-transform: uppercase;
  letter-spacing: 0.0225rem;
  .dark & {
    color: $secondary;
  }
}
h4, .h4 {
  font-size: $h4-font-size;
  color: $black;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  .dark & {
    color: $white;
  }
}
h5, .h5 {
  font-size: $h5-font-size;
  letter-spacing: 0.02rem;
  .dark & {
    color: $light;
  }
}
h6, .h6 {
  font-size: $h6-font-size;
  .dark & {
    color: $light;
  }
}
.title {
  font-size: 8.125rem;
  font-weight: $font-weight-bold;
  color: $black;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.24375rem;
  .dark & {
    color: $white;
  }
  &.light {
    color: $light;
  }
}
.headline {
  font-size: 4.375rem;
  font-weight: $font-weight-black;
  color: $black;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.13125rem;
  .dark & {
    color: $white;
  }
}
.subline {
  font-size: 1.875rem;
  font-weight: $font-weight-light;
  color: $black;
  letter-spacing: 0.0375rem;
  .dark & {
    color: $white;
  }
}
.producthead {
  font-size: 4.375rem;
  font-weight: $font-weight-bold;
  color: $accent;
  letter-spacing: 0.13125rem;
}
.footerline {
  font-size: 0.875rem;
  letter-spacing: 0.0175rem;
  .dark & {
    color: $white;
  }
}

.font-light {
  font-weight: $font-weight-light;
}
.font-regular {
  font-weight: $font-weight-normal;
}
.font-medium {
  font-weight: $font-weight-medium;
}
.font-semibold {
  font-weight: $font-weight-semibold;
}
.font-bold{
  font-weight: $font-weight-bold;
}
.font-extrabold {
  font-weight: $font-weight-bolder;
}
.font-black {
  font-weight: $font-weight-black;
}
.font-normal {
  font-style: normal;
}
.font-italic {
  font-style: italic;
}

.upper {
  text-transform: uppercase;
}

.desc {
  font-weight: $font-weight-semibold;
  color: $gray-500;
  &-line {
    text-transform: uppercase;
    border-bottom: 2px solid $gray-500;
    margin-bottom: 1em;
    padding-bottom: .5em;
  }
  .dark & {
    color: $gray-300;
    &-line {
      border-color: $gray-300
    }
  }
}
  • URL: /components/raw/typography/typography.scss
  • Pfad Dateisystem: components\01-general\typography\typography.scss
  • Größe: 2.8 KB

Keine Notizen vorhanden.