Das Element Section stellt eine allgemeine Unterteilung der Seite dar, z.B. eine thematische Gruppierung des Inhaltes typischerweise mit einer Überschrift.
Optionen:
Title: Als ID für Anchor-Navigation
Padding (top & bottom): None, Small, Medium, Large (Abstand nach innen)
Margin (bottom): None, Small, Medium, Large (Abstand nach außen - nur bottom)
Content Box Content Width: Full, Default, Small
Content Box Content Height: Full, Default
Content Box Style: Light, Dark und None
Content Box Padding (top & bottom): None, Small, Medium, Large (Abstand nach innen)
Content Box Padding (left & right): None, Small (Abstand nach innen)
Background-Image: Image + Image-Position
Background-Image Overlay: Transparenz und Farbe einstellbar
Content Width Default
Content Width Small
Content Width Full
Section LIGHT (Content Box)
Section LILAC (Content Box)
Section ROYAL LIGHT (Content Box)
Section ROYAL DARK (Content Box)
Section DARK (Content Box)
Section NONE (Content Box)
Section BG IMAGE AND OVERLAY
//Content-Element
Columns
Hilft Inhalt in gleichmäßig angeordneten vertikalen Spalten zu organisieren.
Optionen:
Column Layout (z.b 50%- 50%, 30%-70% )
Column Gap: none, small, medium, large
Place Items on Column: center, end
Place Items End
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
//Content-Element
Headline
Die Headline-Elemente bestehen aus sechs verschiedenen Leveln. <h1> ist die Überschrift mit der höchsten Gewichtung und <h6> mit der kleinsten. Ein Headline-Element beschreibt das Thema des Bereiches, welcher der Überschrift folgt.
Es sollte vermieden werden Headline-Level zu überspringen. Es sollte immer von <h1> ausgegangen werden, danach <h2> und so weiter. Außerdem sollte versucht werden nur eine Überschrift des ersten Levels (<h1>) in einem Dokument zu benutzen.
Semantic (<h1>) und Style (Aussehen, Größe) sind beim Headline-Element getrennt.
Optionen: • Text Highlighting: circle, underline
• Italic, Bold
H1 The quick brown fox
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
H1 The quick brown fox
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
//Content-Element
Text & List
Durch den Einsatz der unterschiedlichen Schriftschnitte können Inhalte klar gegliedert und Seiten wirkungsvoll und abwechslungsreich inszeniert werden.
Das Text-Element gibt es in drei verschieden Größen (default, small und medium), kann center, left, oder right ausgerichtet und auf bold unditalicgesetzt werden. Zudem kann der Text als Listen-Element ausgewählt werden. Hierzu stehen zwei verschiedene List Styles zu Verfügung (Bullet & Numbered).
Small Text: Für Hinweise z. B. Sternchentext
Default: normaler Fließtext / Lesetext
Medium Text: Als hervorgehobener Einleitungstext
Interne Verlinkungen: Name der Seite eingeben
Verlinkungen auf Files: Name des Files eingeben
Externe Verlinkungen: komplette URL (z. B. https://www.muster.de/) eingeben
Anker-Links: Anker-Links auf Section mit ID
Small Text: 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 Interne Verlinkung sanctus est Lorem ipsum dolor sit amet.
Default Text: 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 Verlinkung auf File sanctus est Lorem ipsum dolor sit amet.
Large Text: 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 Externe Verlinkung sanctus est Lorem ipsum dolor sit amet.
Small Text: 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 Interne Verlinkung sanctus est Lorem ipsum dolor sit amet.
Default Text: 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 Verlinkung auf File sanctus est Lorem ipsum dolor sit amet.
Large Text: 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 Externe Verlinkung sanctus est Lorem ipsum dolor sit amet.
Mithilfe von Buttons werden verschiedene Handlungsmöglichkeiten des Nutzers dargestellt und klar hierarchisiert.
Primary Button: Der flächige Primary Button wird für die wichtigste Aktion auf einer Seite bzw. View eingesetzt.
Sales Button: Der Secondary Button wird als subtiler Handlungsaufruf eingesetzt.
Standard Button: Der Standard Button wird für untergeordnete Aktionen eingesetzt.
Secondary Button: Der Secondary Button wird als subtiler Handlungsaufruf eingesetzt
Buttons können gruppiert werden (Button Area), um mehrere Aktionen nebeneinander anzubieten. Die Anzahl an Buttons sollte für den Nutzer einfach erfassbar sein. Um den Nutzer zu führen, kann eine einzelne, wichtige Aktion als Primary Button hervorgehoben werden.
Interne Verlinkungen: Name der Seite eingeben
Verlinkungen auf Files: Name des Files eingeben
Externe Verlinkungen: komplette URL (z. B. https://www.muster.de/) eingeben
Anker-Links: Bei Section-Element einen Title vergeben und beim Button "Link to Content Section" auswählen
Primary
Primary
Apply
Sales
Standard
Standard
Secondary
Secondary
Primary
Primary
Apply
Sales
Standard
Standard
Secondary
Secondary
//Content-Element
Alerts
Verwenden Sie Benachrichtigungen, um die Nutzer über wichtige Statusänderungen und Aktualisierungen zu informieren.
Optionen:
Type: Info, Warning, Error, Success
Style: Default, Background-Color
Info
Something notable happend
Warning
Something notable happend
Error
Something notable happend
Success
Something notable happend
Info
Something notable happend
Warning
Something notable happend
Error
Something notable happend
Success
Something notable happend
Info
Something notable happend
Warning
Something notable happend
Error
Something notable happend
Success
Something notable happend
Info
Something notable happend
Warning
Something notable happend
Error
Something notable happend
Success
Something notable happend
//Content-Element
Quotes
Das Quote Element hebt kurze Sätze / Aussagen hervor und sollte flächig oder meist alleinstehend eingesetzt werden.
Optionen:
Pill Content: Optional lässt sich eine Pill mit einem Text einbinden
Image: Optional ist ein Image pflegbar, dies blendet das Icon aus
The European languages are members of the same family. Their separate existence is a myth
Leroy Jenkins, CEO at Pals4Life
Pill Content
The European languages are members of the same family. Their separate existence is a myth
Leroy Jenkins, CEO at Pals4Life
The European languages are members of the same family. Their separate existence is a myth
Leroy Jenkins, CEO at Pals4Life
The European languages are members of the same family. Their separate existence is a myth
Leroy Jenkins, CEO at Pals4Life
//Content-Element
Teaser
Diese Elemente sind als großflächige Teaser anzusehen, die ein Thema anpreisen und auf eine Themenseite verweisen.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
The quick, brown fox jumps over a lazy dog.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
The quick, brown fox jumps over a lazy dog.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
The quick, brown fox jumps over a lazy dog.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
//Content-Element
Images
Das Bild Element passt sich immer der Breite der Column oder der Section Content Width an. Es sollte immer ein Alternative Text vergeben werden. Alternativtexte für Bilder sind wichtig für Barrierefreiheit und SEO.
Generell sollten nur Bilder von einer Dateigröße von < 1 MB in die Media Bank hochgeladen werden, um eine gute Performance der Seite beim Aufruf zu gewährleisten. Ausgenommen davon sind Bilder die z.B. als Download für die Presse hinterlegt werden.
Optionen:
Max-Width
Bild-Unterschrift
Verlinkung auf dem Bild
Crop (Bild zuschneiden)
Image mit Bildunterschrift
Image with Max-Width 350px
Image wurde zu einem Square gecroppt
Image mit Verlinkung
Image mit Bildunterschrift
Image with Max-Width 350px
Image wurde zu einem Square gecroppt
Image mit Verlinkung
//Content-Element
Image Area
Die Image Area gruppiert Bilder. Sie ist geeignet um z. B. Icons nebeneinander abzubilden oder Image-Grids zu bauen
Die Text with Image Komponente kann in verschiedenen Situationen eine gesetzt werden, um Inhalte darzustellen und sie visuell mit einem Bild zu unterstützen.
Optionen:
Image Position: left, right, top left, top center, top right, bottom left, bottom center, bottom right
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
Button
The quick, brown fox jumps over a lazy dog.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
Button
The quick, brown fox jumps over a lazy dog.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
Button
Bildunterschrift Image Caption
The quick, brown fox jumps over a lazy dog.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
Button
The quick, brown fox jumps over a lazy dog.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
Button
//Content-Element
Hero Segment
Das HeroSegment dient dem Benutzer als ersten Einblick in Ihr Unternehmen und Angebot, da es sich oben auf der Webseite befindet und sich normalerweise über die gesamte Breite erstreckt. (Hierfür ist beim Element Section die Content Width auf "Full" und das Spacing auf "None" zu stellen.)
Ein HeroSegment kann auch dazu dienen, Benutzer zu einem gewünschten Link oder einer Call-To-Action zu führen oder das Nutzenversprechen Ihres Unternehmens oben auf der Webseite zu präsentieren.
Optionen:
Bild oder Video: Vimeo, MP4
Bild-Varianten: wählbar für eine optimale Darstellung auf verschiedenen Endgeräten. pflegbar in der Bilddetail-Ansicht unter dem Tab "Variants"
Bild-Positionierung: horizontal und Vertical
Style: Fullscreen ,Cover und Cover Small
Overlay opacity: Transparenz des Overlays kann individuell eingestellt werden
Einfügbarer Content: Headline, Text, Button
The quick, brown fox jumps over the quick.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
Scroll
The quick, brown fox jumps over the quick.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
Scroll
The quick, brown fox jumps over the quick.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
Scroll
The quick, brown fox jumps over the quick.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
The quick, brown fox jumps over the quick.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
The quick, brown fox jumps over the quick.
The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
Button
//Content-Element
Running Gallery
Text
Optionen:
Direction: Left to Right, Right to Left
//Content-Element
Image Card
Cards enthalten Inhalte und Funktionen zu einem einzelnen Thema und können als Teaser für weitere Inhalte dienen. Sie zeigen wahlweise Text, ein Bild, und Links – allein oder in Kombination.
Optionen:
Style: Vertical, Cover
Verlinkung: Mit oder ohne Verlinkung (Komplette Card ist klickbar)
Hiermit können z. B. Ansprechpartner, Kontakte oder Teammitglieder dargestellt werden.
Optionen:
Style: Vertical
diverse Kontakt-Angaben
V-Card zum Downloaden
Maxi Mustermensch
Job Title
Adress Infromationen 81379 München
Maxi Mustermensch
Job Title
Adress Infromationen 81379 München
Maxi Mustermensch
Job Title
Adress Infromationen 81379 München
Maxi Mustermensch
Job Title
Adress Infromationen 81379 München
Maxi Mustermensch
Job Title
Adress Infromationen 81379 München
Maxi Mustermensch
Job Title
Adress Infromationen 81379 München
//Content-Element
Download Card
Die DownloadCard eignet sich für Medientypen, die dem User zum Download zur Verfügung gestellt werden sollen, beispielsweise in Mediatheken oder auf Presse-Seiten.
Optionen:
Style: Vertical
Content gleicht sich an (growContent = true)
Für die Types Image und PDF werden automatisch Thumbnails generiert
Für Types die kein Thumbnail haben, wird ein Placeholder-Thumbnail angezeigt
Alternatives Thumbnail Image kann hinterlegt werden
Cards enthalten Inhalte und Funktionen zu einem einzelnen Thema und können als Teaser für weitere Inhalte dienen. Sie zeigen wahlweise Text, ein Bild, und Links – allein oder in Kombination.
Wiedergabe von Videos über Vimeo oder YouTube. Das Video wird immer auf die Breite der Column oder Section skaliert.
Achtung: YouTube & Autoplay setzt sofort Cookie
Optionen:
MP4, Vimeo oder YouTube
Controls ausblenden
Titel, wenn Controls ausgeblendet sind
MP4 Video
YouTube Video
Um dieses Video ansehen zu können, müssen Sie den Cookies zustimmen.
Vimeo Video
Um dieses Video ansehen zu können, müssen Sie den Cookies zustimmen.
MP4 Video
YouTube Video
Um dieses Video ansehen zu können, müssen Sie den Cookies zustimmen.
Vimeo Video
Um dieses Video ansehen zu können, müssen Sie den Cookies zustimmen.
//Content-Element
Number Counter
Hervorhebung von Benefits oder Fakten in Zahlenform. Die Zahl wird animiert nach oben gezählt, wenn das Element im sichtbaren Bereich ist.
Optionen:
Unit Angabe möglich
Subline Text möglich
0
Mio.
Hier steht ein Text
0
Farben
Hier steht ein Text
0
Team
Hier steht ein Text
0
Mio.
Hier steht ein Text
0
Farben
Hier steht ein Text
0
Team
Hier steht ein Text
//Content-Element
Accordion
Das Accordion Element gibt den Benutzer einen Überblick über den Inhalt der Seite, sodass er entscheiden kann, welche Abschnitte er lesen möchte. Accordions können die Informationsverarbeitung und -entdeckung effektiver gestalten.
Wann zu verwenden:
Um verwandte Informationen zu organisieren.
Um Seiten zu verkürzen und das Scrollen zu reduzieren, wenn der Inhalt nicht unbedingt vollständig gelesen werden muss.
Wenn der Platz knapp ist und lange Inhalte nicht auf einmal angezeigt werden können, z. B. auf einer mobilen Schnittstelle oder in einem Seitenbereich.
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.
//Content-Element
Tab Area
Verwenden Sie Tabs, um den Nutzern ein einfaches Navigieren zwischen verschiedenen Ansichten innerhalb desselben Kontexts zu ermöglichen.
Optionen:
Tab mit oder ohne Icon
Mit beliebigen Content befüllbar
This is the content of tab 1
This is the content of tab 2
This is the content of tab 3
This is the content of tab 4
Tab One
Tab Two
Tab Three
Tab Four
This is the content of tab 1
This is the content of tab 2
This is the content of tab 3
This is the content of tab 4
Tab One
Tab Two
Tab Three
Tab Four
//Content-Element
Slider
Slider werden eingesetzt, um mehrere Inhalte des gleichen Formats an einer Position verfügbar zu machen. Ein Slider bildet beliebig viele Items / Slides ab. Der Nutzer kann den Slider mit Swipe-Gesten, Pfeilen oder mit der Mini-Paginierung steuern.
Dient zur interaktiven Darstellung unterschiedlicher Aspekte und Highlights einer Thematik / Produktes. Elemente eines Bildinhalts können somit punktuell durch Verlinkungen zu weiterführenden Informationen hervorgehoben werden. Das Hotpot Element ist über die volle Breite der Seite anzulegen.
Der kann auch länger sein und Absätze haben. Juppi!
I am Button
//Content-Element
Form
Formulare bilden eine besonders wichtige Schnittstelle zwischen Nutzer und Ihrem Unternehmen / Produkt. Oft stehen sie an kritischen Stellen einer User Journey. Deshalb sollten Formulare leicht verständlich gestaltet und die Anzahl der abgefragten Informationen so klein wie möglich sein. Zum Aufbau von Formularen werden die vorhandenen Komponenten nach Bedarf kombiniert und gruppiert.
Optionen:
Inputs können mit Icons versehen werden
Die Aufteilung von Inputs in Spalten wird über die Form Section geregelt (100 %, 50%-50%, 33%-33%-33%, 25%-25%-25%-25%).
Redirect Finisher: Weiterleitung auf eine z.B. Vielen Dank Seite nach absenden des Formulars
//Content-Element
Product Menu
Dient zur Darstellung der Produkte auf Contentseiten oder Landingpages. Die Produkte können einzeln in den Optionen ausgewählt werden. Bild, Produktname und Kurzbeschreibung ziehen sich aus der Produktdetailseite.
