Panel de Foundation
El panel de Foundation es un módulo con borde gris y contenido con relleno interno. Puede usar la.panelclase para crear:
Colores del panel
Use.calloutclase para cambiar el color del panel a azul claro:
Panel de esquinas redondeadas
Use.radiusclase para establecer el panel con esquinas redondeadas:
Panel personalizado
Puede usar CSS para personalizar el panel. En el siguiente ejemplo, usaremos el panel como una tarjeta:
Ejemplo
<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.example.com/wp-content/uploads/2015/11/20121204024112919.jpg" alt="Cinque Terre">
<div class="container">
<h4>La Gran Muralla</h4>
<p>¡¡¡El que no llega a la Gran Muralla no es un verdadero hombre!!!</p>
</div>
</div>
.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.example.com/wp-content/uploads/2015/11/20121204024112919.jpg" alt="Cinque Terre">
<div class="container">
<h4>La Gran Muralla</h4>
<p>¡¡¡El que no llega a la Gran Muralla no es un verdadero hombre!!!</p>
</div>
</div>
Pruébalo »