Auf dieser Seite werden alle aktuell bestehenden Komponenten mit allen Ausprägungen aufgeführt.
___________
Reference Components
Dienen zur Darstellung von vorhandenem, indexiertem Content.
Das ist eine Text-Komponente in einem Akkordeonpunkt. Hier stehen alle Formatierungen für normale Text-Komponenten zur Verfügung.
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.
Das ist eine TextImage-Komponente in einem Akkordeonpunkt. Hier kann beliebig Text mit Formatierungen und Linksgepflegt 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.
Folgende Varianten:
Highlighting über "dark background" (Styling) möglich
Darstellung von 1-6 Kontakten. Diese verteilen sich dynamisch je nach Anzahl der Kontakte und je nach Viewport.
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
Folgende Varianten:
Highlighting über "dark background" (Styling) möglich.
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
Varianten (Button-Farbe):
Styling-Optionen - Background colour:
Es können max. 10 interne und/oder externe Links vergeben werden → mehr Begriffe kann ein User nicht mehr verarbeiten.
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
Folgende Varianten:
Es sind 1-6 Teaser auswählbar. Diese verteilen sich dynamisch je nach Anzahl der Teaser und je nach Viewport.
Highlighting über "dark background" (Styling) möglich.
Beschreibungstext kann über "No Info Text" (Styling) ausgeblendet werden.
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
Einzelne Teaser bestehen aus:
Es können 1-6 Facts dargestellt werden; die Anordnung und Größe der Komponente passt sich dynamisch an den Content und den jeweiligen Viewport an.
Auswahl der Icons über Google Material Icons.
Styling-Optionen - Background colour:
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
Darstellung von Logos / Unternehmen inkl. Link (Empfehlung: max. 14)
Auswahloptionen:
Bis ca. 8 Logos / Unternehmen ist die Darstellung statisch (abhängig vom Viewport ggf. auch bei weinger Logos), bei mehr als 8 ist die Darstellung dynamisch als Slider durchlaufend.
Die Logos / Unternehmen können mit ihrem Unternehmensnamen angezeigt werden oder ohne (Styling "Show company name").
Die Logos / Unternehmen können in zufälliger Reihenfolge angezeigt werden ("Display Companies Randomly").
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
1-4 Preise können dargestellt werden
Es kann über die Preiskomponenten hinweg eine übergreifende Headline gepflegt werden.
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
Headline (der jeweiligen Preisoption) und Preis sind Pflichtangaben.
optional:
Varianten:
*Zusätzliche Styling-Optionen der Variante "Regular":
Es können bis zu 2 CTAs gepflegt werden (gilt nur für Variante "Image left" & "Image right"; Variante "Regular" wird ohne CTAs dargestellt)
Es können bis zu 3 Ankerlinks gesetzt werden (Links zu Abschnitten auf derselben Seite).
Headline immer als H1 verwenden!
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.
Varianten:
Styling-Optionen - Background colour:
"Das ist die Variante Image right. Hier steht das Zitat. Zusätzlich kann die Hintergrundfarbe ausgewählt werden (Grau, Orange, Light Pink, Pink, Rot)."
"Das ist die Variante Image left. Hier steht das Zitat. Zusätzlich kann die Hintergrundfarbe ausgewählt werden (Grau, Orange, Pink, Rot)."
"Das ist die Variante Image left, mit Grey background. Hier steht das Zitat. 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."
"Das ist die Variante Image left, mit Orange background. Hier steht das Zitat. 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."
"Das ist die Variante Image left, mit Light pink background. Hier steht das Zitat. 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."
"Das ist die Variante Image left, mit Pink background. Hier steht das Zitat. 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."
"Das ist die Variante Image left, mit Red background. Hier steht das Zitat. 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."
Varianten:
Styling-Optionen - Background colour:
Es können bis zu 2 CTAs gepflegt werden.
Variante Text centered, mit CTA-Button, ohne background
Das ist ganz normaler Text.
Das ist normaler Text in fett.
Das ist normaler Text in kursiv.
Hier sind normale Links möglich: Ankerlinks, externe Links, interne Links, Media Links (PDFs)
Das ist eine Aufzählung mit Bulletpoints:
Das ist eine nummerierte Aufzählung:
Variante Text centered, mit 2 CTA-Buttons, mit Styling Grey background
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.
Variante Text centered, mit 2 CTA-Buttons, mit Styling Orange background
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.
Variante Text centered, mit 2 CTA-Buttons, mit Styling Pink background
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.
Variante Text centered, mit 2 CTA-Buttons, mit Styling Red background
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.
Variante Text left, ohne CTA-Button, ohne Background
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.
Variante Text left, mit 2 CTA-Buttons, mit Highlighting (Dark background)
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.
Variante Text left, mit 2 CTA-Buttons, mit Styling Orange background
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.
Variante Text left, mit 2 CTA-Buttons, mit Styling Pink background
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.
Variante Text left, mit 2 CTA-Buttons, mit Styling Red background
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.
Varianten:
*Diese Varianten können auch ohne Text als reine Image-Komponente verwendet werden. Dazu das Textfeld einfach leer lassen.
Highlighting über "dark background" (Styling) möglich.
Image left, kein CTA-Button, ohne 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. At vero eos et accusam et justo duo dolores et ea rebum.
Komponente kann auch mit Hintergrundfarben (Grau, Orange, Pink, Rot) genutzt werden.
Image right, mit 2 CTA-Buttons, mit Styling Grey background
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.
Image right, mit 2 CTA-Buttons, mit Styling Orange background
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.
Image right, mit 2 CTA-Buttons, mit Styling Pink background
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.
Image right, mit 2 CTA-Buttons, mit Styling Red background
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.
Image centered, mit CTA-Button, ohne Highlighting
Wenn hier keinerlei Text gepflegt wird, dann kann diese Variante für die Darstellung als reine Bild-Komponente genutzt werden.
Image centered small, ohne CTA-Button, mit Styling Grey background
Wenn hier keinerlei Text gepflegt wird, dann kann diese Variante für die Darstellung als reine Bild-Komponente genutzt werden.
Komponente kann auch ohne Hintergrundfarbe oder mit den anderen Hintergrundfarben (Orange, Pink, Rot) genutzt werden.
Varianten:
*Diese Varianten können auch ohne Text als reine Image-Komponente verwendet werden. Dazu das Textfeld einfach leer lassen.
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
____________________
Varianten
Ein Link zur Artikelübersichtsseite mit allen Artikeln kann angezeigt werden ("Show Link to Search Page").
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
max. 6 Presseinformationen werden als Slider angezeigt (3 nebeneinander)
Ein Link zur Presseinformationsübersichtsseite mit allen Presseinformationen kann angezeigt werden ("Show Link to Search Page").
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
