Farben

$black

.bg-black
$white

.bg-white

$charcoal

.bg-charcoal
$dark-blue

.bg-dark-blue
$blue

.bg-blue
$light-blue

.bg-light-blue
$offwhite

.bg-offwhite
$dark-grey

.bg-dark-grey
$tan

.bg-tan

.bg-animated

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

.bg-glass-thin
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

.bg-glass-regular

Typographie

Überschrift H1

Überschrift H2

Überschrift H3

Überschrift H4

<h1>Lorem ipsum dolor</h1>

<span class="h1">Lorem ipsum dolor</span>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eius labore modi neque numquam optio porro praesentium reiciendis, repellat unde! Dolorem enim exercitationem nam officiis veniam! Mollitia nostrum quos reiciendis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cumque, dicta dolor eos est non numquam officia reiciendis repudiandae ut. Cupiditate error minus molestiae nisi omnis praesentium quibusdam saepe voluptatum. Alias at deserunt doloribus expedita fugiat illum in iste, magni nihil non, omnis provident quibusdam quis soluta tempore voluptate voluptatem. Ad, cupiditate neque.

Accusamus eaque illo libero odio quia totam. Animi autem commodi deleniti excepturi illo maiores quibusdam temporibus vel voluptatum! Ab accusamus aut autem commodi dignissimos dolores id iusto, laudantium minima molestiae odit officiis, quam rem repellat veritatis vitae! Culpa dolor earum est id laborum magni nemo quae, quidem, quos, sed suscipit tenetur unde veniam? Dolor eveniet minima quo repellat unde. Cum eveniet excepturi fugiat optio rem? Perspiciatis, velit! Aut consectetur distinctio tempora totam. Iste, labore, voluptatibus. Aut doloribus maiores nihil quibusdam quisquam totam veniam. A accusamus asperiores consequuntur fugiat incidunt inventore, nam obcaecati, quisquam rerum similique veritatis voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eius labore modi neque numquam optio porro praesentium reiciendis, repellat unde! Dolorem enim exercitationem nam officiis veniam! Mollitia nostrum quos reiciendis!

<blockquote>Lorem ipsum dolor...</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eius labore modi neque numquam optio porro praesentium reiciendis, repellat unde! Dolorem enim exercitationem nam officiis veniam! Mollitia nostrum quos reiciendis!

<p class="bold">Lorem ipsum dolor...</p>

Buttons

Button element

<button class="btn btn-primary">Primary Button</button>

<button class="btn btn-secondary">Secondary Button</button>

<button class="btn btn-tertiary">Tertiary Button</button>

      <button class="btn btn-tertiary-mini"><i class="fa-regular fa-chart-column" aria-hidden="true"></i> Tertiary-Mini Button</button>
    

      <button class="btn btn-text"><i class="fa-regular fa-chart-column" aria-hidden="true"></i> Text Button</button>
    

<button class="btn btn-problem">Problem-Button</button>

Anchor element

Primary Button

<a href="#" class="btn btn-primary">Primary Button</a>

Secondary Button

<a href="#" class="btn btn-secondary">Secondary Button</a>

Tertiary Button

<a href="#" class="btn btn-tertiary">Tertiary Button</a>

Tertiary-Mini Button

      <a href="#" class="btn btn-tertiary-mini btn-icon btn-icon-chart-column">Tertiary Button</a>
    

Text Button

<a href="#" class="btn btn-text btn-icon btn-icon-chart-column">Text Button</a>

Problem-Button

<a href="#" class="btn btn-problem">Problem-Button</a>

Textparagraph

Das ist ein Blindtext, aber in deutscher Blindtext damit wir prüfen können, ob dieser Inhalt auch übersetzt wird. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

Textparagraph H3

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.

Textparagraph - Inhalt zentriert

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.

Textparagraph - Text zweispaltig

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.

Textparagraph - Hintergrund

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.

Textparagraph - Abstand nach unten reduzieren

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.

Test

Download document

Download-Paragraph

Titel einer Linkliste

Titel des FAQ Paragraph

Ist das eine Frage?

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.

Ist das eine zweite Frage?

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.

Ist das eine dritte Frage?

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.