Foundation Panel
Foundation panel is a module with a gray border and padded content. It can be used..panelclasses to create:
panel color
Usage.calloutThe class changes the panel color to light blue:
rounded panel
Usage.radiusThe class sets the panel with rounded corners:
custom panel
You can use CSS to customize panels. In the following example, we use the panel as a card:
Example
<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>the Great Wall</h4>
<p>He who has not been to the Great Wall is not a true man!!!</p>
</div>
</div>
.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>the Great Wall</h4>
<p>He who has not been to the Great Wall is not a true man!!!</p>
</div>
</div>
Try it Yourself »