Styleguide

Inhaltselemente und CSS-Klassen

Hinweis

Ein umrandetes Textelement zur Hervorhebung von Inhalten.
Optional kann ein Icon eingebunden werden indem im Textfeld ein Bild platziert wird.
Als normales Inhaltselement des Typs "Text" mit der Klasse:

Störer

Ein farblich hinterlegtes Textelement zur starken Hervorhebung von Inhalten.
Als normales Inhaltselement des Typs "Text" mit der Klasse:

Spaltensets

Zur Erstellung einzelner Layoutvarianten können Spaltensets eingesetzt werden.
Inhaltselement: Spaltenset (Start).

Dazu sind folgende Möglichkeiten vorkonfiguriert:

Trennlinien

Zur stärkeren optischen Trennung von Inhalten. 

Trennlinien können als Inhaltselement "PEP Trennlinie farbig" in 3 verschiedenen Farben eingebunden werden.

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.

"Call-to-Action"-Boxen

Hervorgehobene Einstiegspunkte in die tiefere Struktur einer Seite.
Vor allem gedacht für die wichtigsten Links auf Landingpages.

Einbindbar als Inhaltselement "PEP Call to Action".

Einzelne Box:

Sollen mehrere Boxen nebeneinander in einem Raster platziert werden müssen die einzelnen Boxen von ein HTML-Elementen mit diesem Inhalt umschlossen sein:

<div class="cta-list">

...

</div">

Ergebnis:

Accordion

Lange Textinhalte können kompakter als Accordion dargestellt werden. Eignet sich z.B. für FAQ.
Inhaltselement: Akkordeon - Einzelelement.

Textfarbe

Neben schwarz gibt es 2 Farben in denen Text gefärbt werden kann.
Inhaltselement: Text.
Dazu kann man folgende Klassen setzen:

Headerimages

Headerbilder können als fertige Artikel inkludiert werden. Geignet für Landingpages.