Pricing Table
Preistabelle
Eine Preis-Tabelle ordnet Pläne, Preise, Limits, Funktionen und Kaufbedingungen für einen Vergleich.
| Capability | Starter | Studio | Team |
|---|---|---|---|
| Price per month | $0 | $12 | $29 |
| Projects | 1 | Unlimited | Unlimited |
| Members | 1 | 3 | 10 |
| SVG export | — | ✓ | ✓ |
| Support | Community | Priority | |
| Purchase condition | No card | 14-day trial | 14-day trial |
| Next step |
Ein echtes Beispiel
Drei Pläne richten monatlichen Preis, jährliche Abrechnung, Limits, Support, Steuern und eine Testaktion aus.
Hauptteile
- 01Trigger or task context
- 02Primary control surface
- 03Feedback, focus, and dismissal
Verwenden Sie es, wenn
Verwenden Sie es, wenn Käufer wichtige Unterschiede in Kosten und Wert vergleichen müssen.
Nutze es nicht, wenn
Verstecken Sie niemals Gebühren, gefälschte alte Preise oder gefälschte begrenzte Verfügbarkeit. Erklären Sie, warum ein Plan hervorgehoben ist.
In Code verwendeter Name
plans + billing period + feature matrix Vor dem Ausliefern
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Preistabelle (Pricing Table). User context: Drei Pläne richten monatlichen Preis, jährliche Abrechnung, Limits, Support, Steuern und eine Testaktion aus. Recommended pattern: Preistabelle (Pricing Table). Why it fits: Verwenden Sie es, wenn Käufer wichtige Unterschiede in Kosten und Wert vergleichen müssen. Do not use it when: Verstecken Sie niemals Gebühren, gefälschte alte Preise oder gefälschte begrenzte Verfügbarkeit. Erklären Sie, warum ein Plan hervorgehoben ist. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Kein einziger offizieller Standard kontrolliert den gesamten Begriff. Seine Bedeutung kann sich zwischen Teams, Plattformen oder Frameworks ändern. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Preistabelle (Pricing Table) is used now. Definition: Eine Preis-Tabelle ordnet Pläne, Preise, Limits, Funktionen und Kaufbedingungen für einen Vergleich. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.