Styleguide

Color Palette

  • pear#B5DB1F
  • yellow-green#A0BE27
  • light-goldenrod#F0F8D2
  • jazzberry-jam#A81864
  • dark-tangerine#F5A623
  • black#000000
  • quartz#4A4A49
  • taupe-gray#929292
  • gainsboro#DBDBDB
  • isabelline#EEEEEE
  • white-smoke#F8F8F8
  • white#FFFFFF

iconfont

  • arrow-downEA01
  • arrow-leftEA02
  • arrow-rightEA03
  • checkEA04
  • closeEA05
  • lensEA06
  • link-downloadEA07
  • link-externEA08
  • link-internEA09
  • link-mailEA0A
  • link-mobileEA0B
  • link-phoneEA0C
  • link-sectionEA0D
  • link-vcardEA0E
  • playEA0F
  • service-contactpersonEA10
  • service-craftsmanEA11
  • service-downloadEA12
  • service-faqEA13
  • service-loginEA14
  • service-mailEA15
  • service-openingtimeEA16
  • service-searchEA17
  • zoomEA18

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

Headlines

Das ist eine Überschrift Level 1 dieser Bereich ist strong

Das ist eine Überschrift Level 2 dieser Bereich ist strong

Das ist eine Überschrift Level 2 mit large modifier dieser Bereich ist strong

Das ist eine Überschrift Level 3

Das ist eine Überschrift Level 4

Das ist eine Überschrift Level 5
Das ist eine Überschrift Level 6
Das ist eine Überschrift Level 6 mit preline modifier

Das ist eine Überschrift Level 1 dieser Bereich ist strong

Das ist eine Überschrift Level 2 dieser Bereich ist strong

Das ist eine Überschrift Level 2 mit large modifier dieser Bereich ist strong

Das ist eine Überschrift Level 3

Das ist eine Überschrift Level 4

Das ist eine Überschrift Level 5
Das ist eine Überschrift Level 6
Das ist eine Überschrift Level 6 mit preline modifier

Das ist eine Überschrift Level 1 dieser Bereich ist strong

Das ist eine Überschrift Level 2 dieser Bereich ist strong

Das ist eine Überschrift Level 2 mit large modifier dieser Bereich ist strong

Das ist eine Überschrift Level 3

Das ist eine Überschrift Level 4

Das ist eine Überschrift Level 5
Das ist eine Überschrift Level 6
Das ist eine Überschrift Level 6 mit preline modifier

Paragraphs

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

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

Lists

  • 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
  3. Das ist eine geordnete Liste mit einem sehr langen Eintrag
  • Das ist eine ungeordnete ungestylte 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
  • 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
  3. Das ist eine geordnete Liste mit einem sehr langen Eintrag
  • Das ist eine ungeordnete ungestylte 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
  • 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
  3. Das ist eine geordnete Liste mit einem sehr langen Eintrag
  • Das ist eine ungeordnete ungestylte 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

Buttons

Das ist ein Link im ButtonstyleDas ist ein Link Intern Icon Link im ButtonstyleDas ist ein Icon Link im Buttonstyle mit einem längeren TextDas ist ein Icon Link mit ZusatzdatenDas ist ein Icon Link block Button

Forms

Das ist die Radio Legend
Das ist die Checkbox Legend

Tables

Nr.Etage / LageZimmerWohnfläche (ca.)Kaufpreis WohnungKaufpreis TG-StellplatzKaufpreis Gesamt
1EG links383,92 mverkauftverkauftverkauft
2EG mitte274,62 m299.999,00 €18.000,00 €317.900,00 €
3EG rechts386,92 mreserviertreserviertreserviert

Figure

Test Image
Das ist eine Bildunterschrift (figcaption). Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Test Image
Das ist eine Bildunterschrift (figcaption). Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Test Image
Das ist eine Bildunterschrift (figcaption). Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.