My account  |  Cart  |  Support  |  Forum
RESPONSIVE CSS FRAMEWORK

Panels

The panels could be very useful elements when you want to organize your content in delimited sections or want to highlight a part of your content. The panels can contain any html content and you can create large panels or place more panels in the same row by using the grid. The framework includes ten ready-made panel styles and they are fully customizable.
The panel styles are based on gradient and textured backgrounds. The last panel style supports color classes.
Skin style classes
<div class="panel [style-1, style-2, style-3, style-4, style-5, style-6, style-7, style-8, style-9, style-10]">
    <h5>Panel title</h5>
    <p>Panel content ...</p>
</div>

Color classes ONLY for style-10
<div class="panel style-10 [orange, green, blue, purple, aqua, magenta]">
    <h5>Panel title</h5>
    <p>Panel content ...</p>
</div>

Panel style-1

Panel title

Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here.

Panel title

Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here.

Panel title

Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here. Panel content comes here.

Include for panel style-1

// Common CSS file for the panels
<link rel="stylesheet" href="css/panels/JFPanel.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/panels/JFPanelStyle-1.css" />

// For IE8
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/JFIE.css" />
<![endif]-->

// For IE9+
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/JFIE9.css" />
<![endif]-->

Usage for panel style-1

<div class="panel style-1">
    <h5>Panel title</h5>
    <p>Panel content...</p>
</div>
Top
More panel styles