Frontend Style Guide

Grid

Grid (gleiche Höhe)

Grid (variable Höhe)

Fieldsets

Formulare

Alerts (BENÖTIGT ÜBERARBEITUNG)

Filter

Buttons

a-Element

button button-primary button-secondary button-tertiary button-neutral

      <a class="button" role="button" href="#">button</a>
      <a class="button button-primary" role="button" href="#">button-primary</a>
      <a class="button button-secondary" role="button" href="#">button-secondary</a>
      <a class="button button-tertiary" role="button" href="#">button-tertiary</a>
      <a class="button button-neutral" role="button" href="#">button-neutral</a>
    

button-Element

button button-primary button-secondary button-tertiary button-neutral

      <button class="button">button</button>
      <button class="button button-primary">button-primary</button>
      <button class="button button-secondary">button-secondary</button>
      <button class="button button-tertiary">button-tertiary</button>
      <button class="button button-neutral">button-neutral</button>
    

input-Element

      <input type="button" class="button" value="button">
      <input type="button" class="button button-primary" value="button-primary">
      <input type="button" class="button button-secondary" value="button-secondary">
      <input type="button" class="button button-tertiary" value="button-tertiary">
      <input type="button" class="button button-neutral" value="button-neutral">
    

Block-Button

button-block button-block

      <a class="button button-block" role="button" href="#">button-block</a>
      <button class="button button-block">button-block</button>
      <input class="button button-block" type="button" value="button-block">
    

Disabled

button-Element

Disabled Disabled Disabled

input-Element

Formular-Elemente

Switches/Checkboxes

Default (Input-Element von Label-Element umschlossen)

Label-Text

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
  Label-Text
</label>

Alternative (Input- und Label-Element getrennt)

Label-Text

<label class="switch">
  <input id="my-checkbox" type="checkbox">
  <span class="slider round"></span>
</label>
<label for="my-checkbox">Label-Text</label>

Tooltips (Vorläufig nur in Reports; muss ausgebaut werden)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Tooltip Rechts Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor. Tooltip Links Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

<a href="#" class="tooltip-inline">
  <span class="icon icon-tooltip"></span>
  <span class="tooltip" role="tooltip">
    <span class="tooltip-title">Tooltip Rechts</span>
    <span class="tooltip-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
  </span>
</a>