CSS

JS

Panel

A panel is generally used to display an image with a caption.

Usage

To define a panel you should apply the .panel class to a div block, for instance, and use the .panel-image and .caption classes to arrange its content.

Panel caption 
  <div class="panel">
    <img src="https://unsplash.it/170/170" class="panel-image">
    <div class="caption">
      Panel caption
    </div>
  </div>


Large Panel

To get a larger panel you can use the .panel-large class, as shown below.

Panel caption 
  <div class="panel panel-large">
    <img src="https://unsplash.it/335/335" class="panel-image">
    <div class="caption">
      Panel caption
    </div>
  </div>


Hover effect

To get a simple hover effect you can use the .panel-hover class, as described below.

Panel caption with hover 
  <div class="panel panel-hover">
    <img src="https://unsplash.it/170/170" class="panel-image">
    <div class="caption">
      Panel caption with hover
    </div>
  </div>