Design System
Playground Zur Vorlage

Komponenten · InhaltTabelle

Komponente · 6 Varianten

Tabelle

components/Tabelle.astro

Feature-Tabelle für Preise: Kopfzeile, Haken/Minus/Satz, Highlight-Spalte als Fond, Gruppen, Preis im Kopf, kompakt, mobil gestapelt.

Notizen

  • Bestand: Vergleich-Matrix (Wir/Sie) mit Haken, Minus, Satz. Keine Highlight-Spalte, keine Preis-Tabelle.
  • Highlight als Fond, nicht als Kante oder Farbe.

Props

Name Typ Default Notiz
variant "feature" | "highlight" | "gruppen" | "preis-kopf" | "kompakt" | "mobil" "feature" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<Tabelle variant="feature" surface="nacht" />

01 · Feature

Drei Pläne, vier Zeilen

Vergleich tabelle. Haken, Minus, Satz.

Nacht

Slot

Retainer

Enterprise

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener Draht MailSlackSlack + Telefon

Paper

Slot

Retainer

Enterprise

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener Draht MailSlackSlack + Telefon

02 · Highlight

Mittlere Spalte im Fond

Pricing-Card highlight. granit-100 / 900.

Nacht

Slot

Retainer

Enterprise

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener Draht MailSlackSlack + Telefon

Paper

Slot

Retainer

Enterprise

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener Draht MailSlackSlack + Telefon

03 · Gruppen

Label-Zeilen

Vergleich gruppen. pt-8.

Nacht

Slot

Retainer

Enterprise

Legen
Fläche in 14 Tagen
Index vor Ads
Ausbauen
Zweite Sprache
Eigener Draht MailSlackSlack + Telefon

Paper

Slot

Retainer

Enterprise

Legen
Fläche in 14 Tagen
Index vor Ads
Ausbauen
Zweite Sprache
Eigener Draht MailSlackSlack + Telefon

04 · Preis-Kopf

Proof unter dem Plan

Pricing. Highlight bleibt.

Nacht

Slot

4.900

Retainer

1.900 / Mon.

Enterprise

auf Anfrage

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener Draht MailSlackSlack + Telefon

Paper

Slot

4.900

Retainer

1.900 / Mon.

Enterprise

auf Anfrage

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener Draht MailSlackSlack + Telefon

05 · Kompakt

py-2

Docs. Für lange Tabellen.

Nacht

Slot

Retainer

Enterprise

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener Draht MailSlackSlack + Telefon

Paper

Slot

Retainer

Enterprise

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener Draht MailSlackSlack + Telefon

06 · Mobil

Je Plan ein Block

Vergleich zeilen. Kein Scroll.

Nacht

Slot

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener DrahtMail

Retainer

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener DrahtSlack

Enterprise

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener DrahtSlack + Telefon

Paper

Slot

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener DrahtMail

Retainer

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener DrahtSlack

Enterprise

Fläche in 14 Tagen
Index vor Ads
Zweite Sprache
Eigener DrahtSlack + Telefon