Foundation Panel

The Foundation Panel is a module with a gray border and padding inside. You can create it using the .panel class:

Example

<div class="panel">  <h3>Title</h3>  
    <p>Text content..</p></div>

Panel Colors

Use the .callout class to change the panel color to light blue:

Example

<div class="panel callout">  <h3>Title</h3>  
    <p>Text content..</p></div>

Rounded Panel

Use the .radius class to set the panel to have rounded corners:

Example

<div class="panel radius">  <h3>Title</h3>  
    <p>Text content..</p></div>

Custom Panel

You can customize the panel using CSS. In the following example, we will make the panel look like a card:

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">  &lt;img src="http://www.tutorialpro.org/wp-content/uploads/2015/11/20121204024112919.jpg" alt="Cinque 
    Terre">   <div class="container">    
    <h4>Great Wall</h4>    <p>One who fails to reach the Great Wall is not a hero!!!</p>  
    </div></div>