Foundation Panel

Foundation Panel ist ein Modul mit einem grauen Rahmen und Inhalt mit Innenabstand. Es kann verwendet werden..panelKlassen zum Erstellen:

Beispiel

<div class="panel">
  <h3>Title</h3>
  <p>Textinhalt..</p>
</div>

Selbst ausprobieren »

Panel-Farbe

Nutzung.calloutDie Klasse ändert die Panel-Farbe in Hellblau:

Beispiel

<div class="panel callout">
  <h3>Title</h3>
  <p>Textinhalt..</p>
</div>

Selbst ausprobieren »

Abgerundetes Panel

Nutzung.radiusDie Klasse versieht das Panel mit abgerundeten Ecken:

Beispiel

<div class="panel radius">
  <h3>Title</h3>
  <p>Textinhalt..</p>
</div>

Selbst ausprobieren »

Benutzerdefiniertes Panel

Sie können CSS verwenden, um Panels anzupassen. Im folgenden Beispiel verwenden wir das Panel als Karte:

Beispiel

<style>
.panel {
    padding: 0;
    border: none;
    width: 50%;
}
div.container {
    text-align: center;
    padding: 15px;
    margin-top: 20px;
}
img {
    width: 100%;
}
</style>

<div class="panel">
  <img src="http://www.example.com/wp-content/uploads/2015/11/20121204024112919.jpg" alt="Cinque Terre">
  <div class="container">
    <h4>die Chinesische Mauer</h4>
    <p>Wer nicht an der Chinesischen Mauer war, ist kein wahrer Mann!!!</p>
  </div>
</div>

Selbst ausprobieren »
Weitere Erweiterungen