Pane
.pane is a basic building block for creating structured content areas in your UI. It serves as a container that has padding, margin-bottom and a background-color.
Use it to group related content together, create sections within a page, or to highlight important information and extend it with different variants and modifiers to suit the needs of your application.
Check out the .content-grid or Examples pages for examples on how you can use panes in a layout.
Basic Usage
<div class="pane">
<p>This is a pane component. It can be used to group related content together.</p>
</div>With Hgroup
<div class="pane primary">
<hgroup>
<h2>Pane title</h2>
<p>This is the pane description</p>
</hgroup>
</div>Variants
Intent Variants
To convey intent and importance, panes can be styled with different variants:
Modifiers
.subtle creates panes with a more muted appearance, often used for less prominent actions.
.ghost creates transparent background panes with colored text and borders, useful for secondary actions where you want minimal visual weight.