The Foundation panel is a gray border with modules with inner margins. Can be used 尝试一下 » Use 尝试一下 » Use 尝试一下 » You can customize the panel using CSS. In the following example, we use the panel as a card:
.panel
Class to create: 8.11.1. Example ¶
<div class="panel">
<h3>标题</h3>
<p>文本内容..</p>
</div>
Panel color ¶
.callout
Class to change the panel color to light blue: 8.11.2. Example ¶
<div class="panel callout">
<h3>标题</h3>
<p>文本内容..</p>
</div>
Fillet panel ¶
.radius
Class sets the panel to fillet: 8.11.3. Example ¶
<div class="panel radius">
<h3>标题</h3>
<p>文本内容..</p>
</div>
Custom panel ¶
8.11.4. 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.runoob.com/wp-content/uploads/2015/11/20121204024112919.jpg"
alt="Cinque Terre">
<div class="container">
<h4>长城</h4>
<p>不到长城非好汉！！！</p>
</div>
</div>