Panes

Panes

Pane and its sections are basic layout components. They stack horizontally next to each other to create the basic app layout.

A default .pane has fluid width. Add the .pane--medium/.pane--narrow modifier to give it a fixed width.

To decrease pane header vertical padding, use .pane__header--condensed

<div class="pane">
  <div class="pane__header">
    ...
  </div>
  <div class="pane__content">...</div>
  <div class="pane__content">...</div>
</div>

<div class="pane pane--medium">
  <div class="pane__header">
    ...
  </div>
  <div class="pane__content">...</div>
  <div class="pane__content">...</div>
</div>

Pane body and content

Pane body is used to wrap pane content to allow scrolling overflow, and is necessary for displaying larger amounts of content. To enable the this behavior, it needs a fixed or maximum height - in app it's usually inherited from .app-layout.

To visually differentialte pane content sections just use .pane__content--grey

<div class="pane">
  <div class="pane__header">
    ...
  </div>
  <div class="pane__body">
    <div class="pane__content">
      ...
    </div>
  </div>
</div>
<div class="pane">
  <div class="pane__header">
    ...
  </div>
  <div class="pane__body">
    <div class="pane__content">
      ...
    </div>
    <div class="pane__content pane__content--grey">
      ...
    </div>
  </div>
</div>

Collapsing pane

Collapsible panes use .is-expanded/.is-collapsed visibility utilities to toggle it's state. A collapsed pane has a fixed width equal to medium pane.

Sometimes it is necessary, to remove padding on a collapsed pane content (e.g. when the pane content contains a list). This can be done using .pane__content--collapsible modifier on the pane content.

<div class="pane is-expanded" id="collapsible-pane" data-toggle-class="is-expanded is-collapsed">
  ...
  <div class="pane__body">
    <div class="pane__content pane__content--grey pane__content--collapsible">
      ...
    </div>
  </div>
</div>

Minimizing pane

Minmizing panes require a .pane__minimized-control, which provides the expand icon and pane title when minimized using .is-minimized on the pane.

<div class="pane is-expanded" id="collapsible-pane" data-toggle-class="is-expanded is-collapsed">
  ...
  <div class="pane__body">
    <div class="pane__content pane__content--grey pane__content--collapsible">
      ...
    </div>
  </div>
</div>

Sticky

When scrolling inside .pane__body, it's sometimes necessary to stick something and let the user scroll further.

This functionality is controlled outside these static prototypes and only provides necessary styles that should be applied to the sticky element.

<div class="pane is-expanded" id="collapsible-pane" data-toggle-class="is-expanded is-collapsed">
  ...
  <div class="pane__body">
    <div class="pane__content pane__content--sticky is-stuck">
      ...
    </div>
    <div class="pane__content">
      ...
    </div>
  </div>
</div>