U

Zweck & Geltungsbereich

Die Modul- & Komponentenbibliothek stellt sicher, dass Inhalte auf der gesamten Website einheitlich dargestellt werden. Sie definiert standardisierte Inhaltsbausteine, die flexibel kombiniert, aber nicht individuell neu gestaltet werden.

Grundregeln für Module

  • Module sind wiederverwendbar und nicht seitenindividuell angepasst.
  • Design (Typografie, Farben, Abstände, Buttons) folgt dem freigegebenen Designsystem.
  • Pro Abschnitt klarer inhaltlicher Fokus und maximal ein primärer CTA.

Abweichungen sind nur nach dokumentierter Designentscheidung zulässig

Kern-Module (Pflicht)

Seitentitle

Untertitel (zb Seitentitel wird automatisch übernommen)

Kurze Einleitung, max. 1 Absatz

 

Preset

Überschrift 2 – Text auf dunklem Hintergrund

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 6
Lorem ipsum dolor sit amet, aber bitte nicht schon wieder ohne Ziel. Consetetur sadipscing elitr, weil „wir schauen mal“ selten eine Strategie ist. Sed diam nonumy eirmod tempor, der angeblich dringend ist, bis jemand eine Entscheidung treffen müsste. An dieser Stelle würden jetzt Buzzwords stehen – tun sie aber nicht. Stattdessen: Klarheit, Priorität und der freundliche Hinweis, dass auch dieses Ipsum keine Probleme löst, wenn man es nur oft genug kopiert.

Informationstext

Der Informationstext dient nicht zur Argumentation und nicht zur Conversion, sondern für:

  • Einordnung
  • Kontext
  • Hinweise („Wichtig zu wissen“, „Zur Orientierung“)
  • Erwartungsmanagement

👉 Er beantwortet: „Bevor du weiterliest – beachte das hier kurz.“

Preset

  • B2S – 

Überschrift 2 – Text auf hellem Hintergrund

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 6
Lorem Link-Beispiel dolor sit amet, aber bitte nicht schon wieder ohne Ziel. Consetetur sadipscing elitr, weil „wir schauen mal“ selten eine Strategie ist. Sed diam nonumy eirmod tempor, der angeblich dringend ist, bis jemand eine Entscheidung treffen müsste. An dieser Stelle würden jetzt Buzzwords stehen – tun sie aber nicht. Stattdessen: Klarheit, Priorität und der freundliche Hinweis, dass auch dieses Ipsum keine Probleme löst, wenn man es nur oft genug kopiert.
Primärer CTA
Sekundärer CTA

Unsichtbarer Teiler

 

Struktur‑ & Bedeutungs‑Module

(gezielt einsetzen)

 

 

Informationstext (Blurb)

für Hinweise

 

Kurze Orientierung, Kontext, „Lesebrille“ für den nächsten Abschnitt.

Beantwortet:

„Wie ist das hier einzuordnen?“

 

Informationstext (Blurb)

für Outcomes

Wirkung zeigen – nicht Features, nicht Prozess.

Beantwortet:

„Was ist nachher spürbar anders?“

 

     

    Infotext (Blurb)

    für Abgrenzung

    Klar sagen, was etwas nicht ist, ohne hart zu wirken.

    Beantwortet:

    „Wo hört das hier bewusst auf?“

      (nicht mit Umschalter mischen)

       Zweck

      • Ablauf
      • Strukturierte Vertiefung
      • „Wie funktioniert das“

       

       

      (nicht mit Umschalter mischen)

       Zweck

      • Ablauf
      • Strukturierte Vertiefung
      • „Wie funktioniert das“

       

       

      Umschalter (Toggle)

      (nicht mit Registerkarte mischen)

      Zweck

      • Ablauf
      • Strukturierte Vertiefung
      • „Wie funktioniert das“

      ❗ Regeln

      • Keine Kernargumente verstecken
      • Keine Marketing‑Texte im Toggle

      Preset

      • B2S – Umschalter Ablauf

      %

      Zähler (Number Counter) (optional)

      Teaser-Module

      Service-Teaser

      Zweck

      Kurzvorstellung eines Angebots inkl. Weiterleitung auf die passende Detailseite.

      Einsatzorte

      • Services‑Übersichtsseite
      • ggf. „Get started“ (als Auswahlhilfe), aber nicht in langen Textseiten

      Struktur (fix)

      1. Angebotsname (kurz)
      2. 1 Nutzen‑Satz (Outcome, nicht Feature)
      3. 1 Link/CTA zur Detailseite
      CTA

      Stage Cards

      B2S – Stage Card kompakt

      Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

      Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

      Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

      B2S -Stage Card mit Bullets

      • Your content goes here.
      • Edit or remove this text inline or in the module
      • Content settings. You can also style every aspect of this content in the module
      • Design settings and even apply custom CSS to this text in the module Advanced settings.
      • Your content goes here.
      • Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module
      • Design settings and even apply custom CSS to this text in the module Advanced settings.
      • Your content goes here. Edit or remove this text inline or in the module Content settings.
      • You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

      Bildformate

      Hero-Bilder

      Inhaltsbilder

      (zwischen Abschnitten)

      Quer

      4:3, Breite 800-1200px

      Leicht hoch

      3:2, 800-1200px