Panels

Containers for grouped information that are part of the same subject.

General

This is the panel__body

<div class="panel">
	<div class="panel__heading">
		<h3 class="panel__title">General</h3>
	</div>
	<div class="panel__body">
		...
	</div>
</div>

Using panels in forms

Panels is something we use regularly in forms when building CRUD applications, but we use the semantically correct fieldset and legend.

General

Name

Comment (optional) A short help text for a textarea.

<fieldset class="panel">
	<legend class="panel__title">General</legend>
	<div class="panel__body">
		...
	</div>
</fieldset>

Collapsible panels

We use the checkbox hack so it’s always collapsible, even without JS.

Collapsible

Now you see me. Now you don't.

<div class="panel panel--collapsible">
	<input type="checkbox" class="panel__trigger" id="panelXtrigger" checked="checked" />
	<label for="panelXtrigger" class="panel__toggler" aria-label="Click to toggle this panel">
	</label>
	<div class="panel__heading">
		<h3 class="panel__title">Collapsible</h3>
	</div>
	<div class="panel__body">
		<p>Now you see me. Now you don't.</p>
	</div>
</div>