Foundation panel
Foundation panel is a gray border, content with padding module. You can use .panel class to create:
Panel color
Use .callout class panel color changed to light blue:
Rounded panel
Use .radius class Sets the panel fillets:
Custom Panel
You can use CSS to customize the panel, the following examples we will panel as a card:
Examples
<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.w3big.com/wp-content/uploads/2015/11/20121204024112919.jpg" alt = "Cinque Terre">
<Div class = "container">
<H4> Great Wall </ h4>
<P> He who has never 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.w3big.com/wp-content/uploads/2015/11/20121204024112919.jpg" alt = "Cinque Terre">
<Div class = "container">
<H4> Great Wall </ h4>
<P> He who has never been to the Great Wall is not a true man ! ! ! </ P>
</ Div>
</ Div>
try it"