The double pane shell comprise of two surrounds each with an optional component - the page header block.
<div class="container page">
<div class="content double-pane double-pane-left">
<div class="pane">
<!-- The pane header goes here -->
<!-- The content goes here -->
</div>
</div>
<div class="content double-pane double-pane-right">
<div class="pane">
<!-- The pane header goes here -->
<!-- The content goes here -->
</div>
</div>
</div>
The divider extends the double pane shell by adding a component between the two panes.
<div class="container page">
<div class="content double-pane double-pane-left">
<div class="pane">
<!-- The pane header goes here -->
<!-- The content goes here -->
</div>
</div>
<div class="divider divider-vertical"></div>
<div class="content double-pane double-pane-right">
<div class="pane">
<!-- The pane header goes here -->
<!-- The content goes here -->
</div>
</div>
</div>