![](assets/images/5/nastuh-abootalebi-284882-unsplash-09a2c57c.jpg)
Unzählige Elemente
Unbegrenzte Möglichkeiten
Ob Entwickler, Marketing Manager, SEO Spezialist oder fürs eigene Projekt – auch ohne HTML Kenntnisse können alle Elemente ganz einfach angepasst und kombiniert werden.
Typografie
H1 - Überschrift 1
Standard Fließtext: Geeignet für beschreibende Texte. Hyperlinks sind unterstrichen. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet.
H1 - Überschrift 1
H2 - Überschrift 2
Hervorgehobener Text: Geeignet für die Einleitung eines Textes, oder eine hervorgehobene Passage innerhalb eines Paragraphen. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Standard Fließtext: Geeignet für beschreibende Texte. Hyperlinks sind unterstrichen. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet.
Standard Aufzählung
H2 - Überschrift 2
- Standard Aufzählungen
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum Links
- Standard Aufzählung
- Standard Aufzählung
Buttons Invertiert
Bilder
mit Untertitel-Varianten
![](assets/images/1/photo-1508179522353-11ba468c4a1c-422e097a.jpeg)
![](assets/images/1/photo-1508179522353-11ba468c4a1c-422e097a.jpeg)
Bilduntertitel Hervorgehoben
als Text Element
![](assets/images/f/photo-1529498933046-3b8c8c19407d-6d4694be.jpeg)
Bilduntertitel
als Text Element
![](assets/images/e/rawpixel-648580-unsplash-3b22ebaf.jpg)
Bilduntertitel
als Text Element
MP4, Youtube, Vimeo
Videos
Farben
Farbpalette
$color-white
$color-brand-light
$color-brand
$color-brand-dark
$color-success
$color-error
$color-silv-light
$color-silv-mid
$color-silv-dark
$color-grey-light
$color-grey-mid
$color-grey-dark
News
News Variante 1
Babyfachmärkte ohne 2G-Regelung
Als Reaktion auf die hohen Corona-Infektionszahlen in Deutschland haben die Regierungschefinnen und Regierungschefs der Länder bundesweit weitere Einschränkungen beschlossen. Sie betreffen vor allem Menschen, die bislang nicht gegen Corona geimpft sind. Ungeimpfte dürfen demnach unabhängig von den Inzidenzen nur noch in Geschäften für Waren des täglichen Bedarfs einkaufen; andere Läden, aber auch Kinos, Kultur- und Freizeitveranstaltungen stehen nur Geimpften und Genesenen offen (2G-Regelung). Begleitet werden sollen die Maßnahmen, die in verschiedenen Bundesländern an verschiedenen Tagen in Kraft treten, von einer breiten Impfkampagne und möglicherweise auch einer allgemeinen Impfpflicht ab Ende Februar 2022.
News
News Variante 2
Geoblocking - grenzenlos einkaufen
- Interview
BDKH-Workshop in Frankfurt
- Projekt
Pressekonferenz Kind + Jugend 2018 6. September 2018, Köln
- Branche
News
News Variante 3
Hero
Hero Inline & Hero Fullwidth
![](assets/images/f/photo-1508179522353-11ba468c4a1c-d6b820ab.jpeg)
Hero Inline
Text mittig ausgerichtet
Verfügbare Optionen: Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt
![](assets/images/f/photo-1508179522353-11ba468c4a1c-d6b820ab.jpeg)
![](assets/images/6/photo-1525980748402-b2911c326b52-1ca6b75d.jpeg)
![](assets/images/6/photo-1525980748402-b2911c326b52-1ca6b75d.jpeg)
![](assets/images/6/photo-1525980748402-b2911c326b52-1ca6b75d.jpeg)
![](assets/images/f/samson-duborg-rankin-91091-unsplash-7069988f.jpg)
![](assets/images/e/rawpixel-648580-unsplash-3b22ebaf.jpg)
Typografie
Text unten zentriert
Abgedunkelter Hintergrund: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
![](assets/images/f/photo-1508179522353-11ba468c4a1c-d6b820ab.jpeg)
Hero Fullwidth
Text unten ausgerichtet
Verfügbare Optionen: Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt. At vero eos et accusam et justo duo dolores et ea rebum.
![](assets/images/f/photo-1508179522353-11ba468c4a1c-d6b820ab.jpeg)
Typografie
Text mittig ausgerichtet
Verfügbare Optionen: Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt. At vero eos et accusam et justo duo dolores et ea rebum.
![](assets/images/6/photo-1525980748402-b2911c326b52-1ca6b75d.jpeg)
Typografie
Text mittig links
Verfügbare Optionen: Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt. At vero eos et accusam et justo duo dolores et ea rebum.
![](assets/images/6/photo-1525980748402-b2911c326b52-1ca6b75d.jpeg)
Typografie
Text mittig zentriert
Verfügbare Optionen: Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt. At vero eos et accusam et justo duo dolores et ea rebum.
![](assets/images/6/photo-1525980748402-b2911c326b52-1ca6b75d.jpeg)
Typografie
Text mittig rechts
Verfügbare Optionen: Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt. At vero eos et accusam et justo duo dolores et ea rebum.
![](assets/images/f/samson-duborg-rankin-91091-unsplash-7069988f.jpg)
![](assets/images/e/rawpixel-648580-unsplash-3b22ebaf.jpg)
Typografie
Text mittig
Verfügbare Optionen: Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt. At vero eos et accusam et justo duo dolores et ea rebum.
Slider Inline
Hero Inline & Hero Fullwidth
Grid Variante 1
Überschrift 2
Verfügbare Optionen: Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt. At vero eos et accusam et justo duo dolores et ea rebum.
Überschrift 2
Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt. At vero eos et accusam et justo duo dolores et ea rebum.
Überschrift 2
Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt. At vero eos et accusam et justo duo dolores et ea rebum.
Überschrift 2
Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt. At vero eos et accusam et justo duo dolores et ea rebum.
![](assets/images/8/ahmed-carter-433915-unsplash-d1d149cb.jpg)
Überschrift 3
Lorem ipsum dolor sit amet ut labore et dolore magna aliquyam erat
Grid Variante 2
mit erweiterter Breite
![](assets/images/a/photo-1508179522353-11ba468c4a1c-437983ec.jpeg)
![](assets/images/a/jakub-gorajek-173097-unsplash-e28e62c9.jpg)
![](assets/images/8/ahmed-carter-433915-unsplash-d1d149cb.jpg)
![](assets/images/9/luca-bravo-275202-unsplash-73bd9f46.jpg)
![](assets/images/9/daniel-monteiro-313651-unsplash-172502a5.jpg)
![](assets/images/5/pedro-lastra-157071-unsplash-95991037.jpg)
Grid Variante 3
ohne Spalten Abstand
![](assets/images/3/rawpixel-648580-unsplash-4b7229bc.jpg)
Bildunterschrift
als Text Element
![](assets/images/0/photo-1525980748402-b2911c326b52-240b9e0d.jpeg)
Bildunterschrift
als Text Element
![](assets/images/9/photo-1529498933046-3b8c8c19407d-2942dd53.jpeg)
Bildunterschrift
als Text Element
Bild Grid
H1 - Überschrift 1
Standard Fließtext: Geeignet für beschreibende Texte. Hyperlinks sind unterstrichen. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Grid Slider
Normale und erweiterte Breite
Cards
Varianten: Default, Icon, Background
![](assets/images/c/photo-1525980748402-b2911c326b52-6356a693.jpeg)
Überschrift H3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
![](assets/images/1/andre-benz-1092194-unsplash-6-f639e31d.jpg)
Überschrift H3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
![](assets/images/e/daniel-monteiro-313651-unsplash-1246008e.jpg)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
![](assets/images/1/photo-1508179522353-11ba468c4a1c-bcbedf1b.jpeg)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
Überschrift H3 zweizeilig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
Überschrift H3 zweizeilig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
Überschrift H3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
Überschrift H3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
![](assets/images/e/photo-1525980748402-b2911c326b52-2ac70a59.jpeg)
Überschrift H3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
![](assets/images/8/rawpixel-648580-unsplash-9c2c3a6e.jpg)
Überschrift H3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
![](assets/images/9/luca-bravo-275202-unsplash-73bd9f46.jpg)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
![](assets/images/9/cody-davis-253925-unsplash-c2cb879c.jpg)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
Fakten
Überschrift 2
Fakten
Überschrift 2
Fakten
Überschrift 2
Features
H3 - Überschrift 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
H3 - Überschrift 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
H3 - Überschrift 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
Features Hintergrund
H3 - Überschrift 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
H3 - Überschrift 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
H3 - Überschrift 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
Features Invertiert
H3 - Überschrift 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
H3 - Überschrift 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
H3 - Überschrift 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
Features
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.
H3 - Headline 3
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo.
H3 - Headline 3
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo.
H3 - Headline 3
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo.
Maps
Maps mit Standort
Formular
Formular mit Bestätigung
Logo Galerie
Akkordeon
Akkordeon / FAQ
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. 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.
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. 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.
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. 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.
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. 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.
Headline 1
Headline 2
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. 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.
Login Formular
Mitglieder Login
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
![](assets/images/c/adrian-spiegelt-261642-unsplash-409360e7.jpg)
![](assets/images/1/rawpixel-603653-unsplash-9e7ebac3.jpg)
Unbegrenzte Möglichkeiten
Unzählige weitere Elemente
Diese und unzählige weitere Elemente gibt's in der Element Übersicht. Ob Entwickler, Marketing Manager, SEO Spezialist oder fürs eigene Projekt – auch ohne HTML Kenntnisse können alle Elemente ganz einfach angepasst und kombiniert werden.