11.1 #Panel.panel Outer panel
A simple panel of color var(--panel-bg-color)
.
Examples
Default styling
Hello world!
.panel--rounded
Panel with left bottom corner rounded
Hello world!
Markup
<div class="panel [modifier class]" style="height: 4em;">
Hello world!
</div>
Source:
css/modules/panels.css
, line 1
11.1.1 #Panel.panel.header Panel header
This is meant to be used for the heading part of a panel.
It is of color var(--panel-bg-color-lighter)
.
Examples
Default styling
this is 1st child
this is 2nd child
this is 3rd child
.panel__header--two-children
A thin line separates first child from second
this is 1st child
this is 2nd child
this is 3rd child
Markup
<div class="panel__header [modifier class]" style="width: auto;">
<h1>this is 1st child</h1>
<h4>this is 2nd child</h4>
<h5>this is 3rd child</h5>
</div>
Source:
css/modules/panels.css
, line 31