Foundation panel
The Foundation panel is a gray border with a module with an inner margin.
You can
.panel
class to create:
Instance
<
div
class=
"panel"
>
<
h3
; Title
slt;
/h3
>
<
The
content of
the text:
<
/p
>
<
/div
>
Try it out . . .
The color of the panel
Use
.callout
class to change the panel color to light blue:
Instance
<
div
class=
"panel callout"
>
<
h3
; Title
slt;
/h3
>
<
The
content of
the text:
<
/p
>
<
/div
>
Try it out . . .
Fillet panel
Use
.radius
class to set the panel to fillets:
Instance
<
div
class=
"panel radius"
>
<
h3
; Title
slt;
/h3
>
<
The
content of
the text:
<
/p
>
<
/div
>
Try it out . . .
Custom panels
You can use CSS to customize the panel, and in the following example we use the panel as a card:
Instance
<
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=
"//www.w3cschool.cn/wp-content/uploads/2015/11/20121204024112919.jpg"
alt=
"Cinque Terre"
>
<
div
class=
"container"
>
<
h4;
Great Wall
slt;
/h4
>
<
Not
to the Great
Wall is not a good man!!!
<
/p
>
<
/div
>
<
/div
>
Try it out . . .