Showcase
Auf dieser Seite werden alle aktuell bestehenden Komponenten mit allen Ausprägungen aufgeführt.
Auf dieser Seite werden alle aktuell bestehenden Komponenten mit allen Ausprägungen aufgeführt.
___________
Reference Components
Dienen zur Darstellung von vorhandenem, indexiertem Content - ob hierfür eine Preview angezeigt werden kann, ist abhängig vom vorhandenen Content der Webseite; ggf. ist hier kein Inhalt zu sehen, wenn kein passender Content vorhanden ist.
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:
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-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.
Zur Darstellung wird das Default-Bild der jeweiligen Site genutzt - das ist nicht das hier dargestelle Hintergrundbild!
optional:
Es können bis zu 2 CTAs gepflegt werden.
Es können bis zu 3 Ankerlinks gesetzt werden (Links zu Abschnitten auf derselben Seite).
Headline immer als H1 verwenden!
Varianten:
"Das ist die Variante Image right. 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. 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 Text only. 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:
Highlighting über "dark background" (Styling) möglich.
Es können bis zu 2 CTAs gepflegt werden.
Variante Text centered, mit CTA-Button, ohne Highlighting (Dark 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, ohne CTA-Button, 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, ohne CTA-Button, ohne 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 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.
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, kein Highlighting
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 CTA-Button, mit Highlighting
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 Highlighting
Wenn hier keinerlei Text gepflegt wird, dann kann diese Variante für die Darstellung als reine Bild-Komponente 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)
Das ist eine optionale Video-Unterschrift
Video left, mit CTA
Das ist Beschreibungstext für das Video.
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.
Video right, ohne CTA
Das ist Beschreibungstext für das Video.
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.
Video centered, ohne CTA
Das ist Beschreibungstext für das Video.
Wenn hier kein Text gepflegt wird und auch kein CTA, kann diese Darstellung als reine Video-Komponente genutzt werden.
Video centered small, mit CTA
Das ist Beschreibungstext für das Video.
Wenn hier kein Text gepflegt wird und auch kein CTA, kann diese Darstellung als reine Video-Komponente genutzt werden.
____________________
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)
Wenn hier keine Komponente zu sehen ist, sondern eine Fehlermeldung oder nur Headline und ggf. Link, dann stehen nicht ausreichend Artikel für diese Site zur Verfügung, die hier angezeigt werden könnten.
Darstellung von max. 6 Unternehmen (angemeldete Aussteller mit Daten über NovaDB / SelfService) als Slider (3 nebeneinander)
CTA "Zur Suche" führt zur Ausstellerübersicht.
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
Wenn hier keine Komponente zu sehen ist, sondern eine Fehlermeldung oder nur Headline und ggf. Link, dann stehen keine Ausstellerdaten aus der NovaDB zur Verfügung, die hier angezeigt werden könnten.
max. 6 Presseinformationen 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)
Wenn hier keine Komponente zu sehen ist, sondern eine Fehlermeldung oder nur Headline und ggf. Link, dann stehen nicht ausreichend Presseinformationen für diese Site zur Verfügung, die hier angezeigt werden könnten.
max. 6 Sessions werden als Slider angezeigt (3 nebeneinander)
Ein Link zur Sessionübersichtsseite mit allen Sessions kann angezeigt werden ("Show Link to Search Page").
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
Wenn hier keine Komponente zu sehen ist, sondern eine Fehlermeldung oder nur Headline und ggf. Link, dann stehen nicht ausreichend Sessions für diese Site zur Verfügung, die hier angezeigt werden könnten.
Varianten
Styling-Option der optionalen Headline: H1 - H6 (SEO, keine optischer Effekt)
Diese Komponente nimmt sehr viel Platz in Anspruch und ist hier bewusst nicht eingebunden. Eine Preview steht im Handbuch zur Verfügung.