Kategorie · Bereich · Nutzen

Das Hervorgehobene in einem Satz

Ein bis zwei Zeilen Subline, die den Nutzen knapp und sachlich beschreibt. Platzhaltertext ohne echte Aussage.

Primäre Aktion Erst ansehen
Live · Panel-Titel
Statuszeile einsKurze Beschreibung oder Beispielausgabe des Panels.
Statuszeile zweiWeiterer Beispielinhalt für den Vorschau-Kasten.
Statuszeile dreiNoch eine Zeile, um die Optik zu zeigen.
Vertrauensmerkmal eins Vertrauensmerkmal zwei Vertrauensmerkmal drei Vertrauensmerkmal vier

Zielgruppen

Überschrift für den Abschnitt mit zwei Karten.

Problem der Gruppe A

Rolle Eins

Kurzer einleitender Satz, warum diese Gruppe ein Problem hat, das gelöst wird.

  • Erster Nutzenpunkt als Listenpunkt
  • Zweiter Nutzenpunkt als Listenpunkt
  • Dritter Nutzenpunkt als Listenpunkt
  • Vierter Nutzenpunkt als Listenpunkt

Problem der Gruppe B

Rolle Zwei

Kurzer einleitender Satz, warum diese Gruppe ein Problem hat, das gelöst wird.

  • Erster Nutzenpunkt als Listenpunkt
  • Zweiter Nutzenpunkt als Listenpunkt
  • Dritter Nutzenpunkt als Listenpunkt
  • Vierter Nutzenpunkt als Listenpunkt

„Ein einprägsames Zitat oder eine typische Aussage, kursiv gesetzt in Serifenschrift.“

Quellenangabe des Zitats

So arbeitet es

Interaktive Szenarien-Ansicht.

Vier Situationen als Tabs — links wählen, rechts läuft der Inhalt.

Live · Ansicht
Szenario EinsBeispielhafter Inhalt oder Dialog des gewählten Szenarios. Platzhalter für den eigentlichen Ablauf.

Im Paket enthalten

Aufgaben-Übersicht in Kartenform.

Kategorie Eins

1

Feature Eins

Kurze Beschreibung des Features in ein bis zwei Zeilen.

2

Feature Zwei

Kurze Beschreibung des Features in ein bis zwei Zeilen.

3

Feature Drei

Kurze Beschreibung des Features in ein bis zwei Zeilen.

Kategorie Zwei

4

Feature Vier

Kurze Beschreibung des Features in ein bis zwei Zeilen.

5

Feature Fünf

Kurze Beschreibung des Features in ein bis zwei Zeilen.

6

Feature Sechs

Kurze Beschreibung des Features in ein bis zwei Zeilen.

Preise

Ein Preis. Alles andere auf Anfrage.

Keine Staffelmodelle, keine versteckten Grenzen.

Hauptpaket

Produktname

ab 249 € / Monat

netto, zuzüglich Einrichtung

Beschreibung des Hauptpakets und was enthalten ist.

Zusatz

Option Eins

Auf Anfrage

Beschreibung der Zusatzoption.

Zusatz

Option Zwei

Auf Anfrage

Beschreibung der zweiten Zusatzoption.

Exklusiv · Limitiert

Programm-Überschrift für ein limitiertes Angebot.

Beschreibung des Angebots in ein bis zwei Sätzen.

0,- €

Keine Einrichtungskosten

50%

Rabatt-Zeitraum

Nur begrenzte Plätze verfügbar

Jetzt teilnehmen

Direkt testen

Kontakt-Bereich mit großer Nummer oder Aktion.

Direktwahl

0000 00000000

Jetzt anrufen Lieber schreiben?

Hinweistext zu Bedingungen oder Datenschutz in kleiner Schrift.

Fakt Eins

Kurzbeschreibung des Fakts.

Fakt Zwei

Kurzbeschreibung des Fakts.

Fakt Drei

Kurzbeschreibung des Fakts.

Design-System

Komponenten-Bibliothek

Alle klassischen Elemente als Vorlage — HTML in index.html, Styles in style.css.

Typografie

Kicker / Eyebrow

Display-Überschrift

H1 — Überschrift erster Ebene

H2 — Überschrift zweiter Ebene

H3 — Zwischenüberschrift (Sora)

H4 — Kleine Überschrift (Sora)

Lead-Text — etwas größerer Einleitungssatz für Abschnitte.

Fließtext — normaler Absatz in IBM Plex Sans. Mit Inline-Link, Inline-Code und KBD.

Small — Hinweistext, Meta-Information, Fußnoten.

  • Ungeordneter Listenpunkt
  • Zweiter Punkt
  • Dritter Punkt
  1. Nummerierter Punkt
  2. Zweiter Punkt
  3. Dritter Punkt

„Zitat in Lora Italic — für Testimonials und Hervorhebungen.“

Quellenangabe
// Code-Block
const design = 'system';

Buttons

Primary Navy Outline Light
Small Default Large Disabled
Ghost (auf dunkel) Laden…

Badges / Tags

Angebot Aktiv Neu Kategorie

Formularelemente

Hilfetext unter dem Feld.

Bitte gültige E-Mail-Adresse eingeben.

https://
Checkboxen
Radios

Alerts / Hinweise

InfoNeutraler Hinweis für den Nutzer.
ErfolgDie Aktion wurde erfolgreich ausgeführt.
WarnungBitte Eingabe prüfen.
FehlerEtwas ist schiefgelaufen.

Loading-Zustände

darvis denkt

Karten

Variante 1

Standard

Schlichter Container mit Linie und Radius.

Variante 2

Akzent-Kante

Karte mit Akzent-Balken am oberen Rand.

Variante 3

Glow

Karte mit Akzent-Rahmen und leichtem Schein.

Tabelle

NameStatusDatumBetrag
Eintrag EinsAktiv19.09.2026249,00 €
Eintrag ZweiOffen18.09.202699,00 €
Eintrag DreiArchiv17.09.20260,00 €

Accordion

Erster aufklappbarer Bereich
Inhalt des ersten Bereichs. Beliebiger Text oder weitere Elemente.
Zweiter Bereich
Inhalt des zweiten Bereichs.
Dritter Bereich
Inhalt des dritten Bereichs.

Chatfenster

d

darvis

Antwortet sofort

Hallo! Ich bin der Assistent. Womit kann ich helfen?09:41
Hi! Ich hätte gern einen Überblick.09:42 ✓✓
Aufnahme läuft0:00

Motion & Akzente

0

Metrik Eins

0

Metrik Zwei

0

Metrik Drei

KomponentenAnimationLayoutThemeTypographyMotion KomponentenAnimationLayoutThemeTypographyMotion

Navigation & Meta

AB CD EF Tooltip bei Hover Modal öffnen

Modal-Überschrift

Beispiel-Dialog im Design-Stil. Schließt per Button, Klick auf den Hintergrund oder Escape.

d

Assistent

Online

Hallo! Ich bin der Demo-Assistent. Wie kann ich helfen?