1. Home
  2. Foundation panel

Foundation panel

Foundation panel is a gray border, content with padding module. You can use .panel class to create:

Examples

<Div class = "panel">
<H3> Title </ h3>
<P> text /en </ p>
</ Div>

Panel color

Use .callout class panel color changed to light blue:

Examples

<Div class = "panel callout" >
<H3> Title </ h3>
<P> text /en </ p>
</ Div>

Rounded panel

Use .radius class Sets the panel fillets:

Examples

<Div class = "panel radius" >
<H3> Title </ h3>
<P> text /en </ p>
</ Div>

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">
= "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>

Hot Tutorials

Contact US