Content-Guide

Content-Elemente für LEIMER

Übersicht aller Content-Elemente:

// Content-ElementHeadline

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 2" hat noch eine Kickerline.

Headline h1

Optionale KickerlineHeadline h2

Headline h3

Headline h4

Headline h5

Headline h6

// Content-ElementText 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, italic oder beides 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 takimata 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 Verlinkung auf File sanctus est Lorem ipsum dolor sit amet.

Medium 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 Externe Verlinkung sanctus est Lorem ipsum dolor sit amet.

List text element
List text element
List text element
List link element

List text element
List text element
List text element

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 takimata 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 Verlinkung auf File sanctus est Lorem ipsum dolor sit amet.

Medium 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 Externe Verlinkung sanctus est Lorem ipsum dolor sit amet.

List text element
List text element
List text element
List link element

List text element
List text element
List text element

// Content-ElementButtons

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.
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

Primary

Primary mit Icon

Standard

Standard mit Icon

Secondary

Secondary mit Icon

Primary

Primary mit Icon

Standard

Standard mit Icon

Secondary

Secondary mit Icon

// Content-ElementBilder

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

Option:

Bild-Caption aktivieren
Maximale Breite
Alternativer text (falls Bild nicht geladen wird)
Titel für Redaktion
Verlinkung

Enable caption=true, Overlay=none — Image Caption

// Content ElementImage Area

Die Image Area gruppiert Bilder. Sie ist geeignet um z. B. Icons nebeneinander abzubilden.

// Content-ElementSlider

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-ElementVideo

Wiedergabe von Videos über Vimeo oder YouTube. Das Video wird immer auf die Breite der Column oder Section skaliert.

Optionen:

Vimeo oder YouTube
Presets: Default, HideControls, Autoplay

Vimeo Default

Vimeo Hide Controls

Vimeo Autoplay

// Content-ElementHero 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 (Padding und Margin) 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. Das Element kann in verschiedenen Widths eingesetzt werden und so auch als Teaser an verschiedenen Stellen der Website dienen.

Options:

Style (Cover, Cover Small, Cover Fullscreen)
Hintergrundbild
Hintergrundvideo (Vimeo oder YouTube)
Durchsichtigkeit (Opacity) von Overlay
Inhalte (Headline, Text, Button)
FF-Siegel Badge

This is the kickerline standing here. The quick, brown fox jump

Button

This is the kickerline standing here. The quick, brown fox jump

Button

The quick, brown fox jump

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Button

// Content-ElementTeaser

Diese Elemente sind als großflächige Teaser anzusehen, die ein Thema anpreisen und auf eine Themenseite verweisen.

Das Teaser Element sollte laut CI-Konzept immer über die volle Breite des Contents laufen. Hierfür ist beim Element Section die Content Width auf "Full" zu stellen.

Optionen:

Style: Bild links oder rechts
Bild Positionierung (horizontal und vertikal)
Text-Bereich kann beliebig (Headline, Text, Button) editiert werden.

The quick, brown fox jumps over a lazy dog.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Button

The quick, brown fox jumps over a lazy dog.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Button

The quick, brown fox jumps over a lazy dog.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Button

The quick, brown fox jumps over a lazy dog.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Button

// Content-ElementText mit Bild

Die Text with Image Komponente kann in verschiedenen Situationen eingesetzt werden, um Inhalte darzustellen und sie visuell mit einem Bild zu unterstützen.

Optionen:

Style: Bild links oder rechts
- Top-Left, -Center oder -Right
- Bottom-Left, -Center oder -Right
Bild: maximale Breite
Text-Bereich kann beliebig (Headline, Text, Button) editiert werden.

The quick, brown fox jumps over a lazy dog.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Button

The quick, brown fox jumps over a lazy dog.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Button

The quick, brown fox jumps over a lazy dog.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Button

The quick, brown fox jumps over a lazy dog.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Button

// Content-ElementImage Cards

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 oder Horizontal
Verlinkung
Bild Positionen

Text

Text

Text

// Content-ElementIcon Card

IconCards eigen sich für die Darstellung von z. B. Features oder Benefits.

Optionen:

Verlinkung
Icon
Icon Style: mit oder ohne Hintergrund
Style: Vertikal oder Horizontal

Text

Text

Text

Text

Text

Text

Text

Text

// Content-ElementContact Card

Hiermit können z. B. Ansprechpartner, Kontakte oder Teammitglieder dargestellt werden.

Titel

Job Titel

Text

+49 12 34567890 +49 12 34567890 01234567890 max@mustermann.de www.mustermann.de

// Content-ElementDownload 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: Horizontal, Horizontal Small
Für Types die kein Thumbnail haben, wird ein Placeholder-Thumbnail angezeigt
Alternatives Thumbnail Image kann hinterlegt werden

Zertifikat 2023

Bio Zertifikat LEIMER

application/pdf
354.16 KB

Download

Zertifikat 2023

Bio Zertifikat LEIMER

application/pdf
354.16 KB

Download

Zertifikat 2023

Bio Zertifikat LEIMER

application/pdf
354.16 KB

Download

Zertifikat 2023

Bio Zertifikat LEIMER

application/pdf
354.16 KB

Download

// Content-ElementAccordion

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.

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.

Meta Information

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Meta Information

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

General Kenobi

Hello there~

General Kenobi

// Content-ElementQuote

Das Quote Element hebt kurze Sätze / Aussagen hervor und sollte flächig oder meist alleinstehend eingesetzt werden.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
Leroy Jenkins, Pals4Life

// Content-ElementTabelle

Nutzen Sie Tabellen, um den Nutzern eine einfache Übersicht bzw. Auflistung von Elementen zu verschaffen. Desweiteren werden somit besondere Passagen auf der Seite nochmals deutlich hervorgehoben.

Optionen:

Spaltenmanipulation
Zeilenmanipulation
Textausrichtung innerhalb der Zelle
Zeilen und/oder Spalten zusammenzufügen

Hello world
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Zutat	Menge
Zutat	Menge
Zutat	Menge
Zutat	Menge

Hello world
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Zutat	Menge
Zutat	Menge
Zutat	Menge
Zutat	Menge

// Content-ElementTab

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

The light is your friend. Preserve it. Let your heart be your guide. Once you learn the technique, ohhh! Turn you loose on the world; you become a tiger. When things happen - enjoy them. They're little gifts. We'll put some happy little leaves here and there.

Cat ipsum dolor sit amet, flee in terror at cucumber discovered on floor chew foot lick human with sandpaper tongue trip on catnip. Bite plants bring your owner a dead bird for dream about hunting birds mrow climb leg. Mewl for food at 4am lick plastic bags but wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again drink from the toilet. Warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit for ask for petting scratch me now! stop scratching me!, hack up furballs. Attack curtains rub face on everything. Pushes butt to face lick butt and make a weird face howl uncontrollably for no reason so stand with legs in litter box, but poop outside so ask to go outside and ask to come inside and ask to go outside and ask to come inside slap owner's face at 5am until human fills food dish. Cat playing a fiddle in hey diddle diddle? purr while eating. So you're just gonna scroll by without saying meowdy? eat grass, throw it back up yet scratch me there, elevator butt hunt anything that moves. Inspect anything brought into the house scream at teh bath. Attack feet stare at the wall, play with food and get confused by dust i like to spend my days sleeping and eating fishes that my human fished for me we live on a luxurious yacht, sailing proudly under the sun, i like to walk on the deck, watching the horizon, dreaming of a good bowl of milk but cat snacks, for nyan fluffness ahh cucumber!. Haha you hold me hooman i scratch the best thing in the universe is a cardboard box. Being gorgeous with belly side up i bet my nine lives on you-oooo-ooo-hooo. Nya nya nyan cough hairball on conveniently placed pants scratch my tummy actually i hate you now fight me the cat was chasing the mouse steal the warm chair right after you get up friends are not food. Instead of drinking water from the cat bowl, make sure to steal water from the toilet eat an easter feather as if it were a bird then burp victoriously, but tender.

Tab One

Fahrrad

Cat ipsum dolor sit amet, flee in terror at cucumber discovered on floor chew foot lick human with sandpaper tongue trip on catnip. Bite plants bring your owner a dead bird for dream about hunting birds mrow climb leg. Mewl for food at 4am lick plastic bags but wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again drink from the toilet. Warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit for ask for petting scratch me now! stop scratching me!, hack up furballs. Attack curtains rub face on everything. Pushes butt to face lick butt and make a weird face howl uncontrollably for no reason so stand with legs in litter box, but poop outside so ask to go outside and ask to come inside and ask to go outside and ask to come inside slap owner's face at 5am until human fills food dish. Cat playing a fiddle in hey diddle diddle? purr while eating. So you're just gonna scroll by without saying meowdy? eat grass, throw it back up yet scratch me there, elevator butt hunt anything that moves. Inspect anything brought into the house scream at teh bath. Attack feet stare at the wall, play with food and get confused by dust i like to spend my days sleeping and eating fishes that my human fished for me we live on a luxurious yacht, sailing proudly under the sun, i like to walk on the deck, watching the horizon, dreaming of a good bowl of milk but cat snacks, for nyan fluffness ahh cucumber!. Haha you hold me hooman i scratch the best thing in the universe is a cardboard box. Being gorgeous with belly side up i bet my nine lives on you-oooo-ooo-hooo. Nya nya nyan cough hairball on conveniently placed pants scratch my tummy actually i hate you now fight me the cat was chasing the mouse steal the warm chair right after you get up friends are not food. Instead of drinking water from the cat bowl, make sure to steal water from the toilet eat an easter feather as if it were a bird then burp victoriously, but tender.

We don't need any guidelines or formats. All we need to do is just let it flow right out of us. Follow the lay of the land. It's most important. We tell people sometimes: we're like drug dealers, come into town and get everybody absolutely addicted to painting. It doesn't take much to get you addicted. We don't really know where this goes - and I'm not sure we really care.

We don't have to be committed. We are just playing here. We'll lay all these little funky little things in there. Play with the angles. We must be quiet, soft and gentle. Clouds are free. They just float around the sky all day and have fun. This is a fantastic little painting.

Strand

Tab Two

// Content-ElementFormular

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

// Content-ElementSections

Die Contend Width bestimmt die Breite eines Elements in der Section. Sie wird durch eine Max Width vergeben.

Mit dem Style Dark wird die Section ein dunklen Hintergrundbild hinzugefügt und all deren Inhalte auf den Dark Mode angepasst (z.B. Headlines werden weiß)

Optionen: