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 & Dark
• Background-Image: Image + Image-Position
• Background-Image Overlay: Transparenz und Farbe einstellbar

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.

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

Default Text with Indentation: 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. 

• List text element
• List text element
• List text element

• List text element
• List text element
• List text element

• List text element
• List text element
• List text element

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

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

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)
• runde Ecken deaktivieren (nur wenn es Sinn macht, bei Logos oder SVG Grafiken)

Teaser-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)
• Einfügbarer Content: Headline, Text, Button, Image

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:

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
• Verlinkung: Mit oder ohne Verlinkung 
  (Button wird nur bei Verlinkung angezeigt)
• Image-Positionierung: horizontal und vertikal

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)

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

Hervorgehobene Verlinkungen z. B. für internen Seiten.

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.

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

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

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