Wählen Sie Ihren Tarif mit monatlicher Zahlung HTML-Vorlage

Drei fertige Tarifkarten bilden einen statischen Preisbereich

Die Überschrift und der begleitende Absatz verdeutlichen den Zweck des Bereichs, bevor die drei Preiskarten beginnen. In einer statischen HTML-Seite kann diese Anordnung als vorgefertigter Preisbereich zwischen anderen Inhaltsbereichen platziert werden. Sie vermittelt ihren eigenen Tarifvergleich, ohne dass die umgebende Seite den Kartenaufbau neu nachbilden muss. „Starter für 5 Seiten“, „Business für 10 Seiten“ und „E-Commerce-Starter“ werden als separate Optionen präsentiert – jeweils mit einem angezeigten Preis, einer vierzeiligen Leistungsumfang-Liste und einer Kaufen-Schaltfläche.

Das wiederkehrende Kartenmuster macht den Bereich als statischen Inhalt leicht verständlich. Jede Option nutzt einen farbigen vertikalen Hauptteil – in Blau, Blaugrün oder Rosa – unter einem weißen, abgerundeten Kopfbereich. Die überlappenden Kopfbereiche schaffen einen einheitlichen Einstiegspunkt für die Tarifnamen, während die großen Preise und aufeinander ausgerichteten Listen einen schnellen visuellen Vergleich ermöglichen. Der dunkelanthrazitfarbene Hintergrund fasst alle drei Karten zu einer zusammengehörigen Gruppe zusammen, anstatt sie wie voneinander getrennte Inhaltsblöcke wirken zu lassen.

Die Bezeichnungen und Werte dienen Demonstrationszwecken. Daher empfiehlt es sich, den Bereich als vorbereitetes Inhaltslayout zu betrachten, dessen Texte, Preise, Leistungspunkte und Schaltflächenziele für das jeweilige Projekt angepasst werden können. Seine statische Funktion ergibt sich aus dem fertigen inneren Aufbau: zuerst die Einleitung, dann die vergleichbaren Tarife und schließlich eine Kaufaktion in jeder Karte.