List layout
Example use cases
- Lists of items, eg products
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">
<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="search-group">
<input placeholder="Search list items" class="form-control-lg" type="search">
<button type="submit"><i class="sky-icon-search"></i></button>
</div>
<div class="d-flex align-items-center justify-content-between my-1">
<span><strong>01</strong> Result(s)</span>
<div class="dropdown" data-toggle="dropdown">
<button class="btn btn-sec btn-dropdown-toggle">Sorting options</button>
<ul class="dropdown-menu dropdown-right">
<li><a href="#">Option 1 Asc</a></li>
<li><a href="#">Option 1 Desc</a></li>
<li><a href="#">Option 2 Asc</a></li>
<li><a href="#">Option 2 Desc</a></li>
</ul>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="pagination">
<div class="btn-group">
<a href="#" class="btn btn-sm btn-sec btn-prev"><i class="sky-icon-prev"></i></a>
<a href="#" class="btn btn-sm btn-sec active">1</a>
<a href="#" class="btn btn-sm btn-sec">2</a>
<a href="#" class="btn btn-sm btn-sec btn-next"><i class="sky-icon-next"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER SEGMENT -->