foundation におけるパネルは、コンテンツの周りに多少のパディングを持つボーダー付きのボックスで、
.panel クラスで作成します：
<div class="panel">
<h3>Heading</h3>
<p>Some text..</p>
</div>
結果：
Some text..
.callout クラスは、パネルの色を水色に変更します：
<div class="panel callout">
<h3>Heading</h3>
<p>Some text..</p>
</div>
結果：
Some text..
.radius クラスは、パネルの角に丸みを追加します：
<div class="panel radius">
<h3>Heading</h3>
<p>Some text..</p>
</div>
結果：
Some text..
パネルのカスタマイズには CSS を使用します - この例では、「カード」のようなパネルのスタイルを試してみました：
<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="paris.jpg" alt="Cinque
Terre">
<div class="container">
<h4>Paris</h4>
<p>Je t'aime tout le temps</p>
</div>
</div>
結果：
Je t'aime tout le temps