causeway-standard-theme
Version:
60 lines (58 loc) • 1.86 kB
HTML
<div class="two-pane-horizontal">
<ul class="nav nav-tabs hidden-lg hidden-md">
<li class="active">
<a href="#pane1" data-toggle="tab"> Pane 1 </a>
</li>
<li>
<a href="#pane2" data-toggle="tab"> Pane 2 </a>
</li>
</ul>
<div class="pane-top">
<div class="pane-wrapper">
<div class="pane">
<h1 class="title">Two pane - Horizontal</h1>
<section>
<p>Default top and bottom pane height will share the total height of page and the divider will be placed accordingly.</p>
<p><strong> Example Code</strong></p>
<pre><code>
<div class="two-pane-horizontal">
<div class="pane-top">
<div class="pane-wrapper">
<div class="pane">
<h3 class="title">Two pane - Horizontal</h3>
<section>
<!--Content Goes Here-->
</section>
</div>
</div>
</div>
<div class="divider twopane-divider-horizontal"></div>
<div class="pane-bottom">
<div class="pane-wrapper">
<div class="pane">
<div class="pane-header-bg">
<h3 class="title">Bottom Panel: Horizontal</h3>
</div>
<div class="bottom-content-panel">
<!--Content Goes Here-->
</div>
</div>
</div>
</div>
</div>
</code></pre>
</section>
</div>
</div>
</div>
<div class="divider twopane-divider-horizontal"></div>
<div class="pane-bottom">
<div class="pane-wrapper">
<div class="pane">
<h1 class="title">Bottom Panel: Horizontal</h1>
<div class="bottom-content-panel">
</div>
</div>
</div>
</div>
</div>