Styleguide

Dieser Styleguide dient dazu eine Übersicht über Elemente darzustellen, die eine Ergänzung der Klassen benötigen.

Links steht die Beschreibung des Elements, Rechts ist eine Ansicht und darunter das Codebeispiel, das verwendet werden kann.

Button Primary

Sit amet, consetetur sadipscing elitr

Mehr erfahren

<a class="btn btn-primary" href="#!">Mehr erfahren</a>

Button Primary Small

Sit amet, consetetur sadipscing elitr

<a class="btn btn-primary btn-small" href="#!">Mehr anzeigen</a>

Button Secondary

Sit amet, consetetur sadipscing elitr

<a class="btn btn-secondary" href="#!">Mehr anzeigen</a>

Button Tertiary

Sit amet, consetetur sadipscing elitr

<a class="btn btn-tertiary" href="#!">Mehr anzeigen</a>

Headline Alpha

Dies ist die größte Überschrift. Sie kann mit oder ohne Dachzeile verwendet werden.

Dachzeile

Lorem ipsum dolor sit amet

<p class="subline-alpha">Dachzeile</p>
<h1>Lorem ipsum dolor sit amet</h1>

Headline Beta

Dies ist die zweitgrößte Überschrift. Sie kann mit oder ohne Dachzeile verwendet werden.

Dachzeile

Lorem ipsum dolor sit amet

<p class="subline-beta">Dachzeile</p>
<h2>Lorem ipsum dolor sit amet</h2>

Headline Gamma

Dies ist die drittgrößte Überschrift. Sie kann mit oder ohne Dachzeile verwendet werden.

Dachzeile

Lorem ipsum dolor sit amet

<p class="subline-gamma">Dachzeile</p>
<h3>Lorem ipsum dolor sit amet</h3>

Headline Delta

Dies ist die viertgrößte Überschrift.

Lorem ipsum dolor sit amet

<h4>Lorem ipsum dolor sit amet</h4>

Fließtext

Normaler Fließtext, wird ohne Zusatzklassen verwendet.

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.

<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.</p>