Upgrade auf einen Premium-Plan HTML-Vorlage

Ein Preisbereich mit vier Karten, bereit für den Einsatz in statischem HTML

Überschrift und Begleittext verdeutlichen den Zweck des Bereichs, bevor die vier Karten die verfügbaren Optionen vorstellen. Start, Basic, Medium und Expert sind nebeneinander angeordnet und bieten einer statischen HTML-Seite einen in sich geschlossenen Preisvergleichsbereich statt einer losen Ansammlung unzusammenhängender Texte. Innerhalb jeder Karte bleiben Tarifname, Nutzungslimits, Preisinformationen und die Schaltfläche „Jetzt kaufen“ vertikal miteinander verknüpft, sodass der Inhalt als eine zusammenhängende Entscheidungseinheit erfasst werden kann.

Die Start-Option ist als kostenlos gekennzeichnet, während die übrigen Karten beispielhafte Preisangaben enthalten. Diese Werte können für das jeweilige Projekt angepasst werden, verdeutlichen aber bereits die vorgesehene Informationsstruktur: ein Tarifvergleich, der Kosten, Limits und einen Handlungsschritt miteinander verbindet. Der sanft schattierte Hintergrund und das etwas höhere Profil der Medium-Karte setzen einen optischen Akzent, ohne Interaktion einzuführen – der Block bleibt rein statisch. Eingebettet in eine statische HTML-Seite übernimmt dieser Bereich den Tarifvergleich, während umliegende Abschnitte Navigation, Produktkontext, Kundenstimmen, Kontaktdaten oder weitere Inhalte bereitstellen. Der Block ist somit als fertiges Abschnittslayout konzipiert, nicht als vollständige statische Website. Dank der einheitlich aufgebauten Karten lässt sich der Inhalt zudem leicht überfliegen, wenn auf der Seite ein direkter Vergleich mehrerer Tarifstufen gefragt ist.