• black#000000
• white#FFFFFF
• dark-cerulean#004A87
• rich-electric-blue#008DCA
• persian-green#009A96
• dark-magenta#951981
• yellow#FFD300
• jazzberry-jam#B10061
• medium-candy-apple-red#D50C2F
• $color-white-smoke#F5F5F5

• symbol-arrow-left-thin
• symbol-arrow-right-thin
• symbol-arrow-right
• symbol-arrow-left
• symbol-arrow-up
• symbol-book
• symbol-contra
• symbol-euro
• symbol-graduation
• symbol-calendar
• symbol-close
• symbol-lens
• symbol-link-back
• symbol-link-download
• symbol-link-extern
• symbol-link-fax
• symbol-link-intern
• symbol-link-mail
• symbol-link-mobile
• symbol-link-map
• symbol-link-phone
• symbol-link-section
• symbol-logo-facebook
• symbol-logo-twitter
• symbol-logo-youtube
• symbol-minus
• symbol-plus
• symbol-pro
• symbol-video

Source Sans Pro 400 Source Sans Pro 700 Brandon Text Web Black 800

Das ist ein normaler Textabsatz. 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.

Das ist ein small Textabsatz. 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.

Das ist ein large Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein normaler Link ohne Icon zur unbestimmten Verlinkung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein normaler Link ohne Icon mit viel Text, damit es über zwei Zeilen läuft zur unbestimmten Verlinkung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein interner Icon Link mit einem langen Text und Zeilenumbruch, Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. zum verlinken auf eine interne Seite

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein externer icon Link zum verlinken auf eine externe Seite

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein download Link zum verlinken auf ein Download

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein E-Mail Link zum verlinken auf eine E-Mail Adresse

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein Telefon Link zum verlinken auf eine Telefonnummer

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

Es folgt ein expliziter externer Link zum verlinken auf eine externe Seite

Es folgt ein expliziter download Link zum verlinken auf ein Download

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

Es folgt ein expliziter Telefon Link zum verlinken auf eine Telefonnummer

Es folgt ein expliziter Mobile Link zum verlinken auf eine Mobilnummer

Es folgt ein Link mit Tooltip

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 H₂O

Dieser Text ist als small markiert

Beispiel einer Abkürzung: HTML

Das Markierungselement gibt ein Highlight an

• Das ist eine ungeordnete Liste
• Das ist eine ungeordnete Liste mit einer untergeordneten Liste
  • Das ist eine ungeordnete Sub-Liste
  • Das ist eine ungeordnete Sub-Liste mit einem sehr langen Eintrag
• Das ist eine ungeordnete Liste mit einem sehr langen Eintrag

1. Das ist eine geordnete Liste
2. Das ist eine geordnete Liste mit einer untergeordneten Liste
   1. Das ist eine geordnete Sub-Liste
   2. Das ist eine geordnete Sub-Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
3. Das ist eine geordnete Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
4. Das ist eine geordnete Liste mit einem sehr langen Eintrag
5. Das ist eine geordnete Liste mit einem sehr langen Eintrag
6. Das ist eine geordnete Liste mit einem sehr langen Eintrag
7. Das ist eine geordnete Liste mit einem sehr langen Eintrag
8. Das ist eine geordnete Liste mit einem sehr langen Eintrag
9. Das ist eine geordnete Liste mit einem sehr langen Eintrag
10. Das ist eine geordnete Liste mit einem sehr langen Eintrag

1. Das ist eine geordnete Liste mit Lines
2. Das ist eine geordnete Liste mit einer untergeordneten Liste
   1. Das ist eine geordnete Sub-Liste
   2. Das ist eine geordnete Sub-Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
3. Das ist eine geordnete Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
4. Das ist eine geordnete Liste mit einem sehr langen Eintrag
5. Das ist eine geordnete Liste mit einem sehr langen Eintrag
6. Das ist eine geordnete Liste mit einem sehr langen Eintrag
7. Das ist eine geordnete Liste mit einem sehr langen Eintrag
8. Das ist eine geordnete Liste mit einem sehr langen Eintrag
9. Das ist eine geordnete Liste mit einem sehr langen Eintrag
10. Das ist eine geordnete Liste mit einem sehr langen Eintrag

Es folgt ein Button im p-tag Link Button