Color Palette

  • black#000000
  • white#FFFFFF
  • dim-gray#666666
  • dark-cerulean#004F7C
  • tiffany-blue#00ACBA
  • raspberry#E60064
  • isabelline#EEEEEE

iconfont

  • arrow-downEA01
  • arrow-leftEA02
  • arrow-rightEA03
  • arrow-upEA04
  • icon-burgerEA05
  • icon-facebookEA06
  • icon-twitterEA07
  • icon-youtubeEA08
  • link-backEA09
  • link-download-docEA0A
  • link-download-studieEA0B
  • link-externEA0C
  • link-faxEA0D
  • link-internEA0E
  • link-mailEA0F
  • link-phoneEA10

Col 12 Grid

col 1
col 11
col 2
col 10
col 3
col 9
col 4
col 8
col 5
col 7
col 6
col 6
col 7
col 5
col 8
col 4
col 9
col 3
col 10
col 2
col 11
col 1
col 12

Nested Grid

col 6
nested col 6
nested col 6
col 6
nested col 9
nested col 3

Offset Columns

col 3 offset 3
col 3 offset 3

Headline

Das ist eine Überschrift Level 1 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 2 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 3 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 4 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 5 mit Hervorhebung und Bold gesetzt
Das ist eine Überschrift Level 6 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 1 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 2 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 3 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 4 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 5 mit Hervorhebung und Bold gesetzt
Das ist eine Überschrift Level 6 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 1 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 2 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 3 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 4 mit Hervorhebung und Bold gesetzt

Das ist eine Überschrift Level 5 mit Hervorhebung und Bold gesetzt
Das ist eine Überschrift Level 6 mit Hervorhebung und Bold gesetzt

Headlines

[h1] Seitenüberschrift (1x pro Seite!)


2. Teil der Überschrift

[h2] Hauptüberschrift


2. Teil der Überschrift

[h3] Überschrift


2. Teil der Überschrift

[h4] Überschrift (klein)


2. Teil der Überschrift

[h5] Überschrift (kleiner)

2. Teil der Überschrift

[h1] Seitenüberschrift (1x pro Seite!)


2. Teil der Überschrift

[h2] Hauptüberschrift


2. Teil der Überschrift

[h3] Überschrift


2. Teil der Überschrift

[h4] Überschrift (klein)


2. Teil der Überschrift

[h5] Überschrift (kleiner)

2. Teil der Überschrift

[h1] Seitenüberschrift (1x pro Seite!)


2. Teil der Überschrift

[h2] Hauptüberschrift


2. Teil der Überschrift

[h3] Überschrift


2. Teil der Überschrift

[h4] Überschrift (klein)


2. Teil der Überschrift

[h5] Überschrift (kleiner)

2. Teil der Überschrift

AccordionElement

Inline Elements

Es folgt ein normaler Link ohne Icon zur unbestimmten Verlinkung

Es folgt ein normaler Link ohne Icon mit viel Text, damit es über zwei Zeilen läuft zur unbestimmten Verlinkung

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite

Es folgt ein externer Link zum verlinken auf eine externe Seite

Es folgt ein download Link zum verlinken auf ein Download

Es folgt ein E-Mail Link zum verlinken auf eine E-Mail Adresse

Es folgt ein Telefon Link zum verlinken auf eine Telefonnummer

Es folgt ein Fax Link zum verlinken auf eine Faxnummer

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf Large Text

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf Small Text

Dieser Text ist durch em hervorgehoben

Dieser Text ist durch strong hervorgehoben

Das u Element is unterstrichener Text

Dieser Text ist als gelsöscht markiert

Dieser Text ist durchgestrichen

Das folgende Zeichen ist hochgestellt: ®

Beispiel für das Zeichen H2O

Dieser Text ist als small markiert

Beispiel einer Abkürzung: HTML

Das Markierungselement gibt ein Highlight an

Es folgt ein normaler Link ohne Icon zur unbestimmten Verlinkung

Es folgt ein normaler Link ohne Icon mit viel Text, damit es über zwei Zeilen läuft zur unbestimmten Verlinkung

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite

Es folgt ein externer Link zum verlinken auf eine externe Seite

Es folgt ein download Link zum verlinken auf ein Download

Es folgt ein E-Mail Link zum verlinken auf eine E-Mail Adresse

Es folgt ein Telefon Link zum verlinken auf eine Telefonnummer

Es folgt ein Fax Link zum verlinken auf eine Faxnummer

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf Large Text

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf Small Text

Dieser Text ist durch em hervorgehoben

Dieser Text ist durch strong hervorgehoben

Das u Element is unterstrichener Text

Dieser Text ist als gelsöscht markiert

Dieser Text ist durchgestrichen

Das folgende Zeichen ist hochgestellt: ®

Beispiel für das Zeichen H2O

Dieser Text ist als small markiert

Beispiel einer Abkürzung: HTML

Das Markierungselement gibt ein Highlight an

Es folgt ein normaler Link ohne Icon zur unbestimmten Verlinkung

Es folgt ein normaler Link ohne Icon mit viel Text, damit es über zwei Zeilen läuft zur unbestimmten Verlinkung

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite

Es folgt ein externer Link zum verlinken auf eine externe Seite

Es folgt ein download Link zum verlinken auf ein Download

Es folgt ein E-Mail Link zum verlinken auf eine E-Mail Adresse

Es folgt ein Telefon Link zum verlinken auf eine Telefonnummer

Es folgt ein Fax Link zum verlinken auf eine Faxnummer

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf Large Text

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf Small Text

Dieser Text ist durch em hervorgehoben

Dieser Text ist durch strong hervorgehoben

Das u Element is unterstrichener Text

Dieser Text ist als gelsöscht markiert

Dieser Text ist durchgestrichen

Das folgende Zeichen ist hochgestellt: ®

Beispiel für das Zeichen H2O

Dieser Text ist als small markiert

Beispiel einer Abkürzung: HTML

Das Markierungselement gibt ein Highlight an