4 Preispläne CSS-Vorlage

Farbfelder trennen vier vergleichbare Tarife

Der dunkelviolette Farbverlauf spannt den Hintergrund des Abschnitts auf, während die vier Karten durch spezifische Farbgestaltungen in Lila, Grün, Blau und Orange die einzelnen Tarifoptionen differenzieren, ohne deren einheitliche Struktur zu verändern. Jede Karte greift denselben visuellen Ablauf auf: ein dunklerer oberer Übersichtsbereich, ein hellerer unterer Leistungsbereich, eine Tarifbezeichnung, ein Preis- oder Verfügbarkeitshinweis, der Abrechnungszusatz „pro Monat“, vier Zeilen mit Leistungen und ein Button „Tarif wählen“. Durch diese Wiederholung wirkt der Preisvergleich wie ein geschlossenes Gestaltungssystem und nicht wie vier unzusammenhängende Boxen.

Bei einer Umsetzung als CSS-Vorlage liegt der Hauptvorteil darin, wie flexibel sich die Gestaltungsregeln auf Blockebene verfeinern lassen. Die zentrierte weiße Typografie sichert den Kontrast sowohl zum Farbverlauf als auch zu den satten Kartenfarben, während großzügige Abstände verhindern, dass die Leistungslisten und Buttons überladen wirken. Die Enterprise-Karte kann ihren Hinweis „Demnächst verfügbar“ beibehalten und zugleich die gleichen Abmessungen sowie dieselbe Farblogik wie die bepreisten Karten nutzen. Stilistische Anpassungen können sich somit gezielt auf Hintergrundintensität, farbliche Rollen der Karten, Kontraste zwischen den Bereichen, Eckenradien, Abstände, Button-Betonung und Ausrichtung konzentrieren – bei voller Wahrung der Preisangaben und der Vergleichsfunktion. Dank dieser Feinabstimmungen bleiben alle vier Tarifoptionen optisch aufeinander abgestimmt, selbst wenn Akzente oder Oberflächenstile variieren.