Design System
Playground Zur Vorlage

Sektionen · PreisePricing-Vergleich

Sektion · 6 Varianten

Pricing-Vergleich

sections/PricingVergleich.astro

Intro plus Tabelle-Komponente: Haken/Strich/Satz, Highlight-Spalte, Gruppen, Preis im Kopf, Sticky-Kopf, Mobil gestapelt.

Notizen

  • Shadcnblocks pricing11: Sticky-Kopfzeile, Billing-Tabs, Mobil-Klapp. Tabs entfallen, der Toggle sitzt in Pricing-Tiers.
  • Sticky-Kopf unter dem Header (top-14), Fond in Flächenfarbe.

Props

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

01 · Tabelle

Drei Pläne, vier Zeilen

Tabelle feature. —

Nacht

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

Slot

Retainer

Enterprise

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

Paper

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

Slot

Retainer

Enterprise

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

02 · Highlight

Mittlere Spalte im Fond

Tabelle highlight. —

Nacht

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

Slot

Retainer

Enterprise

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

Paper

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

Slot

Retainer

Enterprise

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

03 · Gruppen

Legen, Ausbauen

Tabelle gruppen. —

Nacht

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

Slot

Retainer

Enterprise

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

Paper

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

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

Tabelle preis-kopf. —

Nacht

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

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

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

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 · Sticky

Kopfzeile klebt

pricing11. top-14, z 10.

Nacht

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

Slot

Retainer

Enterprise

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

Paper

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

Slot

Retainer

Enterprise

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

06 · Mobil

Je Plan ein Block

Tabelle mobil. —

Nacht

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

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

Im Detail

Was in welchem Slot steckt.

Haken heißt drin, Strich heißt nicht. Sätze, wo eine Zahl nicht reicht.

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