Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » E-Business » Codepen: 20 Codeschnipsel für überzeugende Preisübersichten

Codepen: 20 Codeschnipsel für überzeugende Preisübersichten

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Ein Kommentar
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 15. Januar 2017

Inhaltsverzeichnis

Eine Preisübersicht ist stets das gestalterische Mittel der Wahl, wenn du ein Produkt mit unterschiedlichen Features zu unterschiedlichen Preisen darstellen willst. Preisübersichten sparen sowohl dir, wie auch deinen potenziellen Kunden Zeit, denn sie erlauben eine kompakte Darstellung der wichtigsten Aspekte auf engem Raum.

Wie immer im Design, kannst du hier ebensoviel falsch, wie richtig machen. Deshalb haben wir heute eine Sammlung guter Beispiele aus Codepen für dich zusammengestellt. Die meisten reagieren responsiv auf die Größe des Browserfensters, andere sind statischer, aber dennoch sehenswert, weil sie subtile Dynamik in der Nutzung entfalten. Viel Spaß beim Stöbern!

Titel: Ip Pricing Table

ip-pricing-table
Erstellt von: Marcel

Titel: Adaptive Pricing Table

light-and-green-pricing-table
Erstellt von: Alex

Titel: Flat Pricing Table Design

flat-pricing-table
Erstellt von: Mehmet Mert

Titel: Flat Pricing Table

flat-pricing-table-with-flip-over
Erstellt von: Andy Tran

Titel: Pricing Tables

dark-pricing-table
Erstellt von: Joseph Victory

Titel: Pricing Table

dark-table
Erstellt von: Mike Torosian

Titel: Price

light-pricing-table
Erstellt von: catcod

Titel: Pricing Table

compact-dark-pricing-table
Erstellt von: LittleSnippets.net

Titel: Pricing Tables

bluish-pricing-table
Erstellt von: Gerta Xhepi

Titel: Material Pricing Tables

material-rrsponsive-pricing-table
Erstellt von: Kreso Galic

Titel: Flat pricing table

mini-pricing-table
Erstellt von: Felix Franzén

Titel: Price Table Hover Effect

price-table-hover
Erstellt von: Vladimir Lukyanov

Titel: CSS3 Pricing Table

pinkish-pricing-table
Erstellt von: The Legend

Titel: Pricing Tables

responsive-pricing-table
Erstellt von: Eric Thayer

Titel: Pricing Table

mini-pricing-table-2
Erstellt von: Dany Santos

Titel: Bootstrap Pricing Table

bootstrap-pricing-table
Erstellt von: Sahar Ali Raza

Titel: Flipping Pricing Table

mega-pricing-table
Erstellt von: Felix Schwarzer

Titel: Responsive Flat Pricing Table

responsive-flat-pricing-table
Erstellt von: Shane Heyns

Titel: Dark Themed Pricing Table

dark-themed-pricing-table
Erstellt von: LittleSnippets.net

Titel: Pricing Table Tickets/Passes Flip

ticket-styled-pricing-table
Erstellt von: Hans Engebretsen

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

One Step Webdesign hannover Logo

One Step Webdesign

Hannover

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

360 grad konzept logo werbeagentur hannover.

Werbeagentur Hannover | 360 Grad Konzept

Hannover

Khoa Nguyen SEO München Logo

Khoa Nguyen – Online Marketing Freelancer

München

WebOptimizer Logo mit der Aufschrift: Die deutsche Agentur in Österreich.

WebOptimizer

Villach

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Eine Antwort zu „Codepen: 20 Codeschnipsel für überzeugende Preisübersichten“
— was ist Deine Meinung?

  1. Hannah sagt:
    17. Januar 2017 um 10:15 Uhr

    Kann man sicherlich mal gebrauchen. Dankeschön!

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑