BGL Frischdienst
Content-Guide
Image Elemente
Interaktive Elemente
//Content-Element
Section
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
- Content Width: Full, Default, Small
- Content Height: Full, Default
- Padding (top & bottom): None, Small, Medium, Large (Abstand nach innen)
- Margin (bottom): None, Small, Medium, Large (Abstand nach außen - nur bottom)
- Style: Light, Medium, Dark
- Background-Image: Image + Image-Position
- Background-Image Overlay: Transparenz und Farbe einstellbar
Content-Width: Default
Content-Width: Small
Content-Width: Full
Elemente werden automatisch auf die Dark-Section angepasst.
Elemente sind gleich zur Light Section.
Style: Dark
Image mit Overlay 80% color black
//Content-Element
Columns
Hilft Inhalt in gleichmäßig angeordneten vertikalen Spalten zu organisieren.
Optionen:
- Column Layout (z.b 50%- 50%, 30%-70% )
- Column Gap (small, medium, large)
//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. Style "Heading 1" und "Heading 2" haben jeweils noch eine Sub-Headline.
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
HeadlineUntertitel
HeadlineUntertitel
HeadlineUntertitel
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
HeadlineUntertitel
HeadlineUntertitel
HeadlineUntertitel
//Content-Element
Text und 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 gesetzt werden. Zudem kann der Text als Listen-Element ausgewählt werden. Hierzu stehen zwei verschiedene List Styles zu Verfügung (Disc und Check).
- 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
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 takimata sanctus est Verlinkung auf File 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 takimata 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 takimata sanctus est Verlinkung auf File 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 takimata sanctus est Lorem ipsum dolor sit amet.
//Content-Element
Quote
Das Quote Element hebt kurze Sätze / Aussagen hervor und sollte flächig oder meist alleinstehend eingesetzt werden.
Wir schätzen an den Produkten vom Frischdienst Berchtesgadener Land die hervorragende Qualität und den guten Geschmack
Wir schätzen an den Produkten vom Frischdienst Berchtesgadener Land die hervorragende Qualität und den guten Geschmack
//Content-Element
Tabelle
Datentabellen werden verwendet, um Daten effizient zu organisieren und anzuzeigen. Die Datentabellenkomponente ermöglicht die Anpassung mit zusätzlichen Funktionen, wie sie von den Benutzern Ihres Produkts benötigt werden.
| Head | AA | BB | CC | DD |
|---|---|---|---|---|
| Zelle 1 | 11 | 111 | 1111 | 11111 |
| Zelle 2 | 22222 | 222 | 22 | 22 |
| Zelle 3 | 3 | 333 | 33333333 | 3333333333 |
| Head | AA | BB | CC | DD |
|---|---|---|---|---|
| Zelle 1 | 11 | 111 | 1111 | 11111 |
| Zelle 2 | 22222 | 222 | 22 | 22 |
| Zelle 3 | 3 | 333 | 33333333 | 3333333333 |
//Content-Element
Alert
Verwenden Sie Benachrichtigungen, um die Nutzer über wichtige Statusänderungen und Aktualisierungen zu informieren.
Optionen:
- Type: Info, Warning, Error, Success
- Style: Default, Background-Color
//Content-Element
Image
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)
Bild mit Bildunterschrift
Bild mit Max-Width 200px
Bild wurde zu einem Square gecroppt
Bild mit Verlinkung
Bild mit Bildunterschrift
Bild mit Max-Width 200px
Bild wurde zu einem Square gecroppt
Bild 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.
Optionen:
- Position vertical: top, bottom, center
- Position horizontal: left, right, center
Bilder / Icons nebeneinander:
Image-Grid: Kleines Bild ist in Two-Column left und center Positioniert
//Content-Element
Text with image
Dieses Element vereinfacht das Positionieren von Text und Bild, ohne das mehrere Content-Elemente ineinander verschachtelt werden müssen. Es stellt einen zweispaltigen Content dar, wo das Bild variabel (left, right, top, bottom) positionierbar ist.
Optionen:
- Image Position: left, right, top left, top center, top right, bottom left, bottom center, bottom right
- Image Max-Width
- Image immer top auf Mobile ausgerichtet
- Einfügbarer Content: Headline, Text, Button, Image
Image Left
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Image Right
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Top Left Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Top Left Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Top Center Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Top Right Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Bottom Left Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Bottom Center Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Bottom Right Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Left
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Image Right
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Top Left Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Top Left Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Top Center Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Top Right Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Bottom Left Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Bottom Center Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
Image Bottom Right Max-Width
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Bildunterschrift
//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, YouTube
- 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 (mit ScrollDown-Button), Cover und Cover Small
- Overlay opacity: Transparenz des Overlays kann individuell eingestellt werden
- Einfügbarer Content: Headline, Text, Button
HeroSegment Cover Fullscreen
Mit Vimeo-Video (Autoplay, Mute, Loop). Overlay bei 80%. Section Style Dark.
Scroll down
HeroSegment Cover
Overlay bei 60%. Section Style Light.
HeroSegment Cover Small
Overlay bei 80%. Section Style Dark.
//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, Horizontal, Horizontal Small
- Verlinkung: Mit oder ohne Verlinkung
(Button wird nur bei Verlinkung angezeigt) - Image-Positionierung: horizontal und vertikal
Image Card Vertical
Gleiche Herkunft, gleiche Werte: Simon Brunner und Berchtesgadener Land.
Image Card Vertical
Gleiche Herkunft, gleiche Werte: Simon Brunner und Berchtesgadener Land.
Image Card Horizontal
Gleiche Herkunft, gleiche Werte: Simon Brunner und Berchtesgadener Land. Gleiche Herkunft, gleiche Werte: Simon Brunner und Berchtesgadener Land.
Horizontal small
Gleiche Herkunft, gleiche Werte.
Horizontal small
Gleiche Herkunft, gleiche Werte.
Image Card Vertical
Gleiche Herkunft, gleiche Werte: Simon Brunner und Berchtesgadener Land.
Image Card Vertical
Gleiche Herkunft, gleiche Werte: Simon Brunner und Berchtesgadener Land.
Image Card Horizontal
Gleiche Herkunft, gleiche Werte: Simon Brunner und Berchtesgadener Land.
Horizontal small
Gleiche Herkunft, gleiche Werte.
Horizontal small
Gleiche Herkunft, gleiche Werte.
//Content-Element
Icon Card
IconCards eigen sich für die Darstellung von z. B. Features oder Benefits.
Optionen:
- Style: Vertical und Horizontal
- Icon-Style: Mit und ohne Hintergrund
- Mit oder ohne Verlinkung
(Button wird nur bei Verlinkung angezeigt)
//Content-Element
Icon Link
Hervorgehobene Verlinkungen z. B. für Verweise auf PDFs.
Optionen:
- Style: Vertical und Horizontal
- Icon-Style: Mit und ohne Hintergrund
//Content-Element
Contact Card
Hiermit können z. B. Ansprechpartner, Kontakte oder Teammitglieder dargestellt werden.
Optionen:
- Style: Vertical, Horizontal, Horizontal Small
- diverse Kontakt-Angaben
- V-Card zum Downloaden
Muster Street 123
12345 Musterstadt
Muster Street 123
12345 Musterstadt
Muster Street 123
12345 Musterstadt
Muster Street 123
12345 Musterstadt
Muster Street 123
12345 Musterstadt
Muster Street 123
12345 Musterstadt
Muster Street 123
12345 Musterstadt
Muster Street 123
12345 Musterstadt
//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, Horizontal, Horizontal Small
- 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
//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.
Headline
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.
Headline
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
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
//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.
Optionen:
- Layout Presets: Default, Offset Before
- Navigation: Pfeile (next / prev) sichtbar oder ausblenden
- Pagination: Anzahl von Slides als Punkten
sichtbar oder ausblenden - Autoplay: Wechselt automatisch zum nächsten Slide
ein oder ausschalten - Autoplay delay: Dauer bis zum nächsten Slide gewechselt wird Standard 3000 ms = 3 Sekunden
- Slides per view: Wie viele Items in einem Slide sichtbar sind
Anzahl eintragen von 1 - 4
//Content-Element
Image Gallery
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 den Image-Thumbs steuern.
Optionen:
- Navigation: Pfeile (next / prev) sichtbar oder ausblenden
- Autoplay: Wechselt automatisch zum nächsten Slide
ein oder ausschalten - Autoplay delay: Dauer bis zum nächsten Slide gewechselt wird Standard 3000 ms = 3 Sekunden
//Content-Element
Video
Wiedergabe von Videos über Vimeo oder YouTube. Das Video wird immer auf die Breite der Column oder Section skaliert.
Achtung: YouTube & Autoplay setzt sofort Cookies
Optionen:
- MP$, Vimeo oder YouTube
- Controls ausblenden
- Titel, wenn Controls ausgeblendet sind
//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
//Content-Element
Hotspot
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.
Optionen:
- Hotspot mit Verlinkung
- Hotspot mit Layer
- Section Dark & Light = Overlay ändert sich
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
Scroll To Top
Scroll to top Button als Content-Element.
Optionen:
- Style: Default, Icon only, Text only
- Title pflegbar
//Content-Element
Formular
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%).
- E-Mail Finisher: E-Mail Subject, Empfänger-Name & E-Mail, Sender-Name & E-Mail, CC & BCC, Anhänge
- Redirect Finisher: Weiterleitung auf eine z.B. Vielen Dank Seite nach absenden des Formulars