Panels

Cheatsheet for Panel Elements

Context-based Panels

We implemented context-based Panels. Following we show you how you can use it in the HTML structure and simply in your Less files (if you don't want to harcode it in your HTML structure). Let's begin.

You can simply create a Basic Panel with the following code.

<div class="panel">
     <h3 class="panel--title is--underline">Panel title</h3>
     <div class="panel--body is--wide">Panel body</div>
</div>

As far as good. Now we want to have a colored Panel with the Primary color of our Theme. Just add primary to the panel class. Like that:

<div class="panel primary">
     <h3 class="panel--title is--underline">Panel title</h3>
     <div class="panel--body is--wide">Panel body</div>
</div>

It's colored! You can also add secondary, danger, warning, success instead of primary for several contexts. Note: Of course you can only add one context class to the Panel. Not all)

Now let's have a look how you can easily add the context panel classes to your LESS without touching any of the HTML structure. For example we have a panel with the class .information--panel. Like that:

<div class="panel information--panel">
     <!-- here comes the content -->
</div>

Instead of adding primary to the HTML structure, we add it to our LESS. The LESS file could look like this:

.information--panel {
     .panel.primary;
}

And the Panel is shown in the Primary color. If you want to save more HTML code you can also add the panel mixin to the LESS:

<div class="information--panel">
     <!-- here comes the content -->
</div>

.information--panel {
     .panel;
     .panel.primary;
}

sizes

We also implement two different Panel sizes. You can simply create a small (small) or a large (large) Panel size with the following code.

<div class="panel small">
     <h3 class="panel--title">Panel title</h3>
     <div class="panel--body">Panel body</div>
     <div class="panel--footer">Panel footer</div>
</div>

<div class="panel large">
     <h3 class="panel--title">Panel title</h3>
     <div class="panel--body">Panel body</div>
     <div class="panel--footer">Panel footer</div>
</div>

As mentioned above you can also add it to your LESS file:

.information--panel {
     .panel.small;
}

and that's your HTML:

<div class="panel information--panel">
     <!-- here comes the content -->
</div>