Foundation-Preisliste

Preistabellen können verwendet werden, um Unternehmensprodukte zu präsentieren:

Beispiel

<ul class="pricing-table">
  <li class="title">Basic</li>
  <li class="price">$19.99</li>
  <li class="description">Ideal für kleine Unternehmen</li>
  <li class="bullet-item">24/7 Support</li>
  <li class="bullet-item">15GB Speicher</li>
  <li class="bullet-item">1GB Bandbreite</li>
  <li class="cta-button"><a class="button" href="#">Kaufen</a></li>
</ul>

Selbst ausprobieren »

Beispielanalyse

  • ul.pricing-table- Preisliste definieren
  • li.title- Produkttitel definieren (schwarzer Hintergrund)
  • li.price- Preis definieren (grauer Hintergrund, Element mit großer Schrift)
  • li.description- Produktbeschreibung definieren (falls erforderlich)
  • li.bullet-item- Produktmerkmale definieren
  • li.ca-button- Button-Text (z. B. "Kaufen", "Beitreten", "Registrieren", usw.)

Hinweis:Die Tabelle füllt 100% der Breite des Containers aus, wobei alle Elemente Rahmen haben und zentriert sind.

Preistabellen-Raster

Das folgende Beispiel zeigt die Preise von drei Unternehmensprodukten (die drei Elemente sind gleichmäßig in der Breite aufgeteilt):

Beispiel

<div class="row">
  <div class="medium-4 columns">
    <ul class="pricing-table">
      <li class="title">Basic</li>
      ...
    </ul>
  </div>
  <div class="medium-4 columns">
    <ul class="pricing-table">
      <li class="title">Pro</li>
      ...
    </ul>
  </div>
  <div class="medium-4 columns">
    <ul class="pricing-table">
      <li class="title">Premium</li>
      ...
    </ul>
  </div>
</div>

Selbst ausprobieren »
Weitere Erweiterungen