Filter
Filtering a product list is an important feature - it increases user experience greatly. In this section we'll show you step by step how to easily create basic filters
Column Filter
HTML
<div class="aui-container-filter ">
<div class="row">
<div class="col-3 d-none d-sm-none d-md-none d-lg-block">
<h3 class="aui-refine-list mb-0 w-100 border-right">Refine List</h3>
<div class="pt-4 aui-filter-container border-right">
<h4 class="ui-filter-heading d-block ">Product Type</h4>
<ul class=" term-list aui-list-container aui-filter-group read-more-wrap">
<li class="list-item">
<a class="aui-checkbox-section d-flex align-items-center" role="checkbox" aria-checked="false" tabindex="0">
Student Manual
</a>
</li>
<li class="list-item">
<a href="././" class="aui-checkbox-section d-flex align-items-center" role="checkbox" aria-checked="false" tabindex="0">
Instructor Manual
</a>
</li>
<li class="list-item">
<a href="././" class="aui-checkbox-section d-flex align-items-center" role="checkbox" aria-checked="false" tabindex="0">
Blended Learning
</a>
</li>
<li class="list-item">
<a href="././" class="aui-checkbox-section d-flex align-items-center" role="checkbox" aria-checked="false" tabindex="0">
Video
</a>
</li>
<li class="list-item read-more-target">
<a href="././" class="aui-checkbox-section d-flex align-items-center" role="checkbox" aria-checked="false" tabindex="0">
Poster
</a>
</li>
<li class="list-item read-more-target">
<a href="././" class="aui-checkbox-section d-flex align-items-center" role="checkbox" aria-checked="false" tabindex="0">
Handbook
</a>
</li>
<li class="list-item read-more-target">
<a href="././" class="aui-checkbox-section d-flex align-items-center" role="checkbox" aria-checked="false" tabindex="0">
Reference Card
</a>
</li>
<li class="list-item read-more-target">
<a href="././" class="aui-checkbox-section d-flex align-items-center" role="checkbox" aria-checked="false" tabindex="0">
Guidelines
</a>
</li>
<li class="list-item read-more-target">
<a href="././" class="aui-checkbox-section d-flex align-items-center" role="checkbox" aria-checked="false" tabindex="0">
eLearning
</a>
</li>
</ul>
</div>
</div>
</div>
</div>