causeway-standard-theme/causeway/docs/shells/double-pane.html

<div class="container page">
  <div class="content double-pane double-pane-left">
    <div class="pane">
      <a id="double-pane"></a>
      <header class="content-header">
        <h1 class="title">
          Double Pane
        </h1>
      </header>

      <section>
        <a id="double-pane-vertical-split"></a>
        <header class="content-header">
          <h3 class="title">
            Vertical Split
          </h3>
        </header>

        <p>
          The double pane shell comprise of two surrounds each with an optional component - the <a href="/docs/shells/content.html#content-page-header">page header block</a>.
        </p>
        <pre>
          <code>
            &lt;div class=&quot;container page&quot;&gt;
              &lt;div class=&quot;content double-pane double-pane-left&quot;&gt;
                &lt;div class=&quot;pane&quot;&gt;
                  &lt;!-- The pane header goes here --&gt;
                  &lt;!-- The content goes here --&gt;
                &lt;/div&gt;
              &lt;/div&gt;

              &lt;div class=&quot;content double-pane double-pane-right&quot;&gt;
                &lt;div class=&quot;pane&quot;&gt;
                  &lt;!-- The pane header goes here --&gt;
                  &lt;!-- The content goes here --&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          </code>
        </pre>
      </section>

    </div>
  </div>

  <div class="divider divider-vertical"></div>

  <div class="content double-pane double-pane-right">
    <div class="pane">
      <a id="double-pane-right"></a>
      <header class="content-header">
        <h1 class="title">
          Double Pane
        </h1>
      </header>

      <section>
        <a id="double-pane-vertical-split-divider"></a>
        <header class="content-header">
          <h3 class="title">
            Divider
          </h3>
        </header>

        <p>
          The divider extends the double pane shell by adding a component between the two panes.
        </p>
        <pre>
          <code>
            &lt;div class=&quot;container page&quot;&gt;
              &lt;div class=&quot;content double-pane double-pane-left&quot;&gt;
                &lt;div class=&quot;pane&quot;&gt;
                  &lt;!-- The pane header goes here --&gt;
                  &lt;!-- The content goes here --&gt;
                &lt;/div&gt;
              &lt;/div&gt;

              &lt;div class=&quot;divider divider-vertical&quot;&gt;&lt;/div&gt;

              &lt;div class=&quot;content double-pane double-pane-right&quot;&gt;
                &lt;div class=&quot;pane&quot;&gt;
                  &lt;!-- The pane header goes here --&gt;
                  &lt;!-- The content goes here --&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          </code>
        </pre>
      </section>
    </div>
  </div>
</div>