CNVS

Panels

A panel is a simple, flexible, and customizable content container. In combination with panel cells, panels can be used to create a wide range of layout and content display options.

Table of Contents

To create a new panel use the .panel class. By itself, a panel is pretty basic - offering nothing more than box styling and outer spacing. Use one or more nested panel cells (.panel-cell) to create a layout that fits your specific project requirements.

<div class="panel">
  …
</div>

Panel Cell

The panel cell (.panel-cell) is the basic building block of panels. Any number of panel cells can be used in a panel. Panel cells offer a variety of spacing and styling options.

.panel-cell
.panel-cell
.panel-cell 
<div class="panel">
  <div class="panel-cell">
    …
  </div>
  <div class="panel-cell">
    …
  </div>
  <div class="panel-cell">
    …
  </div>
</div>

Size Modifiers

To adjust the inner padding applied to a panel cell, use one of the available panel-specific size classes. For example, simply using the class .panel-cell-short will reduce padding evenly above and below the panel cell. Use of these modifiers allows you the ability to create unique panel layouts to meet your specific project needs.

Class Description
.panel-cell-shorter Reduce the vertical margins to 25%.
.panel-cell-short Reduce the vertical margins to 50%.
.panel-cell-tall Increase the vertical margins by 150%.
.panel-cell-taller Increase the vertical margins by 200%.
.panel-cell-narrower Reduce the horizontal margins to 25%.
.panel-cell-narrow Reduce the horizontal margins to 50%.
.panel-cell-wide Increase the horizontal margins by 150%.
.panel-cell-wider Increase the horizontal margins by 200%.

Event Name

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus.

Learn More →

Event Name

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus.

Learn More → 
<div class="panel">
  <div class="panel-cell">
    …
  </div>
  <div class="panel-cell panel-cell-short">
    …
  </div>
</div>

Size Direction Modifiers

Add -top, -right, -bottom, or -left to the end of the size modifier class to adjust margin only in the direction implied by the direction modifier.

Class Description
.panel-cell-*-top Adjust margin above the panel-cell.
.panel-cell-*-right Adjust margin to the right of the panel-cell.
.panel-cell-*-bottom Adjust margin below the panel-cell.
.panel-cell-*-left Adjust margin to the left of the panel-cell.

Event Name

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus.

Event Name

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus. 

<div class="panel">
  <div class="panel-cell panel-cell-taller-bottom panel-cell-wider-right">
    …
  </div>
</div>

Panel Styling

Panel support supplied by CNVS is largely limited to layout, leaving much of the styling preference up to the individual or team utilizing panels in their specific project. However, we have include some basic styling options to make panels immediately useful out-of-the-box.

Inverse Panels

Panel support supplied by CNVS is largely limited to layout, leaving much of the styling preference up to the individual or team utilizing panels in their specific project. However, we have include some basic styling options to make panels immediately useful out-of-the-box.

<div class="panel panel-inverse">
  …
</div>

Panel Cell Styling

Panel support supplied by CNVS is largely limited to layout, leaving much of the styling preference up to the individual or team utilizing panels in their specific project. However, we have include some basic styling options to make panels immediately useful out-of-the-box.

Class Description
.panel-cell-borderless Remove all borders from panel cell.
.panel-cell-light Add a light background to panel cell.
.panel-cell-dark Add a dark background to panel cell.
Frontend Developer

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo vol luctus.

Apply Today → 
<div class="panel">
  <div class="panel-cell panel-cell-borderless panel-cell-short-bottom">
    …
  </div>
  <div class="panel-cell flush-top">
    …
  </div>
  <div class="panel-cell panel-cell-dark panel-cell-short">
    …
  </div>
</div>