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.

Jetzt umsehen

Elemente

Element- & Modul-Übersicht

Lade Kitchensink

Seiten Beispiele Jetzt kaufen

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.

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

Icon Aufzählung

H2 - Überschrift 2

  • Website-, Mobile- und UI Design
  • Web- und Web-App Entwicklung
  • Amazon Echo Skill Entwicklung
  • Content Management (CMS) Know-How
  • Absolute Contao 4 Spezialisten
  • Suchmaschinenmarketing und SEO
  • Social Media Strategie
  • Beratung bei Ihrem Vorhaben

Standard Aufzählung

H2 - Überschrift 2

Bilder

mit Untertitel-Varianten

Bilduntertitel: Lorem ipsum dolor
Bilduntertitel: Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bilduntertitel: Lorem ipsum dolor

Bild­unter­titel Hervorgehoben
als Text Element

Bilduntertitel

als Text Element

Bild­unter­titel

als Text Element

Bild­unter­titel

als Text Element

Bild­unter­titel

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

Galerie

4er Raster

Galerie

6er Raster

News

News Variante 1

  • Aktive

TSV Münchingen - TSV 1899 Benningen 1:2 (0:1)

SF Mundelsheim - TSV 1899 Benningen II 6:1 (3:1)

News

News Variante 2

  • Junioren

  • Aktive

TSV 1899 Benningen - SGV Murr  0:2

TSV 1899 Benningen II - SGV Murr II 4:1

  • Junioren

  • Aktive

VfB Tamm - TSV 1899 Benningen 0:4

TSV 1899 Benningen II - spielfrei

  • Aktive

TSV 1899 Benningen - AKV B.G. Ludwigsburg 0:3

TSV 1899 Benningen II - GSV Pleidelsheim II 8:2

  • Aktive

GSV Pleidelsheim II - TSV 1899 Benningen 2:2

News

News Variante 3

  • Aktive

  • Aktive

  • Aktive

  • Aktive

Hero

Hero Inline & Hero Fullwidth

Hero Inline

Text mittig ausgerichtet

Verfügbare Optionen: Text links ausgerichtet, Text rechts ausgerichtet, Text zentriert, Text farblich invertiert, Text farblich hinterlegt, Hintergrund abgedunkelt

Primäre Aktion Sekundäre Aktion

Typografie

Text unten ausgerichtet

Primäre Aktion

Typografie

Text mittig links

Primäre Aktion

Typografie

Text mittig zentriert

Primäre Aktion

Typografie

Text mittig rechts

Primäre Aktion

Typografie

Text hinterlegt

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

Typografie

Text mittig links

und hinterlegt

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

Slider Inline

Hero Inline & Hero Fullwidth

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.

Primäre Aktion Sekundäre Aktion

Typografie

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.

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

Typografie

Text mittig hinterlegt

Primäre Aktion Sekundäre Aktion

Slider Fullwidth

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.

Primäre Aktion Sekundäre Aktion

Typografie

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.

Primäre Aktion Sekundäre Aktion

 

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.

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion Sekundäre Aktion

Typografie

Text mittig hinterlegt

Primäre Aktion Sekundäre Aktion

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.

Primäre Aktion

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

Überschrift 3

Verlinktes Bild mit Überschrift und Untertitel

Überschrift 3

Lorem ipsum dolor sit amet ut labore et dolore magna aliquyam erat

Überschrift 3

Lorem ipsum dolor sit amet ut labore et dolore magna aliquyam erat

Grid Variante 2

mit erweiterter Breite

Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor

Grid Variante 3

ohne Spalten Abstand

Bild­unter­schrift

als Text Element

Bildunterschrift

als Text Element

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.

Primäre Aktion Sekundäre Aktion

Icon Aufzählung

H2 - Überschrift 2

  • Website-, Mobile- und UI Design
  • Web- und Web-App Entwicklung
  • Absolute Contao 4 Spezialisten
  • Suchmaschinenmarketing und SEO
  • Social Media Strategie
  • Beratung bei Ihrem Vorhaben

Grid Slider

Normale und erweiterte Breite

Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor
Bildunterschrift Lorem ipsum dolor

Cards

Varianten: Default, Icon, Background

Überschrift H3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Primäre Aktion

Überschrift H3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Primäre Aktion

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.

Primäre Aktion

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.

Primäre Aktion

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

Primäre Aktion

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

Primäre Aktion

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

Primäre Aktion

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

Primäre Aktion

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

Primäre Aktion

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

Primäre Aktion

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.

Primäre Aktion

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primary Action

H3 - Headline 3

ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo.

Primary Action

H3 - Headline 3

ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo.

Primary Action

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

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.

Primäre Aktion

Maps

Maps mit Standort

Formular

Formular mit Bestätigung

Datenschutz*

Logo Galerie

Akkordeon

Akkordeon / FAQ

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

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

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

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

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.

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.

Jetzt ansehen