My pattern library

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

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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