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>

Text paragraph

This is a dummy text, but in German dummy text so that we can check whether this content is also translated. Far back, behind the mountains of words, far from the countries of vowels and consonants, live the blind texts. They live isolated in Buchstabhausen on the coast of the Semantik, a large ocean of language. A small stream called Duden flows through their village and supplies them with the necessary regularities.

Text paragraph 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.

Text paragraph - content centered

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.

Text paragraph - Text in two columns

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.

Text paragraph - Background

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.

Text paragraph - Reduce distance downwards

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

Title of a link list

Title of the 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.