Foundation panel


May 04, 2021 11:00 Foundation5


Table of contents


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 . . .