Single page with sidebar layout
Single page layouts are ideal for use with the responsive grid to create custom layouts.
Example use cases
- Filterable page content, eg reports
Code output
Open layout in new windowHTML markup
The code snippet below contains only the content segment of the layout, excluding the header and footer segments.
<!-- HEADER SEGMENT -->Copy<div class="content">
<div class="content-item content-item-has-sidebar">
<div class="content-overflown">
<div class="container">
<div class="breadcrumbs-row">
<ol class="breadcrumbs">
<li><a href="#" class="simple-link">Home</a></li>
<li>Sample Path</li>
</ol>
</div>
<div class="sidebar">
<div class="filters-box toggle">
<button class="btn btn-main btn-toggle" data-toggle="toggle">Filter items</button>
<div class="toggle-content">
<div class="pad-sm">
<h4>Filter items</h4>
<div class="filters-item-toggle toggle" data-toggle="toggle">
<button class="btn-toggle">Filter category</button>
<div class="toggle-content">
<ul class="list-filters">
<li>
<label class="custom-radio">
<input name="group1" value="option1" checked="" type="radio">
<span>View all <small><strong>(10)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group1" value="option2" type="radio">
<span>Option 1 <small><strong>(2)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group1" value="option3" type="radio">
<span>Option 2 <small><strong>(3)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group1" value="option4" type="radio">
<span>Option 3 <small><strong>(4)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group1" value="option5" type="radio">
<span>Option 4 <small><strong>(1)</strong></small></span>
</label>
</li>
</ul>
</div>
</div>
<div class="filters-item-toggle toggle" data-toggle="toggle">
<button class="btn-toggle">Filter category 2</button>
<div class="toggle-content">
<ul class="list-filters">
<li>
<label class="custom-radio">
<input name="group2" value="option1" checked="" type="radio">
<span>View all <small><strong>(10)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group2" value="option2" type="radio">
<span><i class="color-square color-scale-1"></i>Option 1 <small><strong>(4)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group2" value="option3" type="radio">
<span><i class="color-square color-scale-3"></i>Option 2 <small><strong>(1)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group2" value="option4" type="radio">
<span><i class="color-square color-scale-5"></i>Option 3 <small><strong>(2)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group2" value="option5" type="radio">
<span><i class="color-square color-scale-7"></i>Option 4 <small><strong>(3)</strong></small></span>
</label>
</li>
</ul>
</div>
</div>
<div class="filters-item-toggle toggle" data-toggle="toggle">
<button class="btn-toggle">Filter category 3</button>
<div class="toggle-content">
<select>
<option>Select option</option>
<option>...</option>
<option>Option (2)</option>
<option>...</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box pad-lg">
<h3 class="text-center"><strong>Single page title</strong><br><small>Feb 02 2017, 12:30</small></h3>
<p class="text-center">Status
<br><span class="inline-block"><i class="color-square color-criticality-1"></i> <strong>Active</strong></span>
</p>
<hr class="sm">
<div class="row">
<div class="col-xs-12 col-xs-6 col-md-3">
<p>Attribute
<br><strong>Value</strong>
</p>
</div>
<div class="col-xs-12 col-xs-6 col-md-3">
<p>Attribute
<br><strong>Value</strong>
</p>
</div>
<div class="col-xs-12 col-xs-6 col-md-3">
<p>Attribute
<br><strong>Value</strong>
</p>
</div>
<div class="col-xs-12 col-xs-6 col-md-3">
<p>Attribute
<br><strong>Value</strong>
</p>
</div>
<div class="col-xs-12 col-xs-6 col-md-3">
<p>Attribute
<br><strong>Value</strong>
</p>
</div>
<div class="col-xs-12 col-xs-6 col-md-3">
<p>Attribute
<br><strong>Value</strong>
</p>
</div>
<div class="col-xs-12 col-xs-6 col-md-3">
<p>Attribute
<br><strong>Value</strong>
</p>
</div>
<div class="col-xs-12 col-xs-6 col-md-3">
<p>Attribute
<br><strong>Value</strong>
</p>
</div>
</div>
<hr class="sm">
<p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi. Suspendisse sit gravida natoque nunc In vitae feugiat pede Quisque Donec. Odio
elit habitasse Pellentesque velit et vitae pretium malesuada Aenean massa. Wisi non ante et nunc Aenean risus tincidunt Aenean nulla condimentum. Dolor laoreet metus velit nulla laoreet mattis eros Nullam Sed convallis. Sed
Vivamus.
</p>
<p>Ut laoreet Curabitur enim volutpat pretium est vel ut lacinia quis. Amet nunc Nulla ut nibh eros id elit senectus Ut sapien. Nullam laoreet dui neque interdum Mauris Morbi Vestibulum mauris dui tellus. Phasellus consequat
vestibulum netus adipiscing sit odio feugiat convallis malesuada sem. Semper pede orci ac leo aliquet Donec neque pretium pretium suscipit. Feugiat natoque Ut ultrices Sed orci senectus quis Sed.
</p>
<p>At Nam gravida nibh natoque et mauris ac id cursus at. Feugiat Suspendisse platea elit ante quis elit ante sapien fringilla vel. Vivamus faucibus nibh Maecenas amet et sapien nascetur quis lorem Curabitur. Donec Ut Morbi
tincidunt congue felis molestie Praesent pretium malesuada nibh. Phasellus Donec condimentum lobortis velit Donec morbi Vivamus ac facilisis urna. Orci condimentum ac Aenean lobortis.
</p>
<p>Cras tellus tellus volutpat id tristique ac ac et Lorem nibh. Est dui natoque nisl lacus elit Nam Cras consequat Nulla et. Quisque egestas dictum nonummy Curabitur porta quis sapien wisi Nulla Donec. Lorem gravida ante lorem
netus ac id id In In porttitor. Dignissim elit pulvinar lacus Nunc In pretium sollicitudin ultrices eu convallis. Eget accumsan adipiscing ipsum lorem sed sit auctor Sed mauris iaculis. Tincidunt commodo Curabitur risus Ut et
convallis.
</p>
<p>Tempor quis nulla condimentum malesuada vestibulum et id Nunc nibh at. Ac leo Phasellus augue hac at Sed lacus semper tortor In. Phasellus Vestibulum Integer nibh Maecenas mauris In ipsum sem velit urna. Facilisi Curabitur
convallis elit sit Ut sed tellus gravida dignissim Vestibulum. Lobortis tortor Donec vel justo leo et risus tortor pretium semper. Faucibus Phasellus pretium justo consectetuer tincidunt Integer Nulla et adipiscing et. Ut ut id
eget dapibus eget Cum nunc semper sed cursus.
</p>
</div>
<div class="spacer-sm"></div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="box pad-lg">
<h3 class="text-center">Single page title</h3>
<p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box pad-lg">
<h3 class="text-center">Single page title</h3>
<p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box pad-lg">
<h3 class="text-center">Single page title</h3>
<p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box pad-lg">
<h3 class="text-center">Single page title</h3>
<p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box pad-lg">
<h3 class="text-center">Single page title</h3>
<p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box pad-lg">
<h3 class="text-center">Single page title</h3>
<p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER SEGMENT -->