<div class="container">
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol class="breadcrumb__list">
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link">Home</a>
</li>
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link">Grandparent</a>
</li>
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link">Parent</a>
</li>
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link" aria-current="page">Children</a>
</li>
</ol>
</nav>
<div class="row">
<div class="col-12">
<h1>SOFAS AND LOVESEATS</h1>
<p>(287 Results)</p>
</div>
<div class="col-12 col-lg-3">
<h3 class="py-12 pl-16 pr-30 mb-0">Filters</h3>
<div class="br-4 bg-sky-lighter p-16">
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Price Range</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>View in Room</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Availability</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Special Features</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Color / Finish</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Style</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Covering / Fabric</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Sofa Type</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Sectional Type</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Bed Size</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Small Spaces</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Mattress Type</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Mattress Size</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Recliner Type</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Construction Material</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
<div class="mb-10">
<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Manufacturers</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
</div>
</div>
</div>
</div>
</div>
</div>
<h3 class="py-12 pl-16 pr-30 mb-0">Recently Viewed</h3>
<div class="px-16">
<p>Tempor occaecat ea reprehenderit ullamco fugiat aute eiusmod sit. Labore commodo in adipisicing et commodo in deserunt labore. Lorem ex voluptate ipsum et.</p>
</div>
</div>
<div class="col-12 col-lg-9">
<div class="br-4 bg-sky-lighter px-20 py-11">
<div class="row align-items-center justify-content-between">
<div class="col-4">
<p class="mb-0">Showing 48 of 286 results</p>
</div>
<div class="col-auto">
<div class="d-flex">
<div class="d-flex align-items-center">
<label for="" class="mr-5">Sort By:</label>
<select class="form__select">
</select>
</div>
<div class="d-flex align-items-center ml-16">
<label for="" class="mr-5">View By:</label>
<select class="form__select">
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
{% render '@breadcrumb' %}
<div class="row">
<div class="col-12">
<h1>SOFAS AND LOVESEATS</h1>
<p>(287 Results)</p>
</div>
<div class="col-12 col-lg-3">
<h3 class="py-12 pl-16 pr-30 mb-0">Filters</h3>
<div class="br-4 bg-sky-lighter p-16">
{% for option in options %}
<div class="mb-10">
{% render '@accordion--plp', option %}
</div>
{% endfor %}
</div>
<h3 class="py-12 pl-16 pr-30 mb-0">Recently Viewed</h3>
<div class="px-16">
<p>Tempor occaecat ea reprehenderit ullamco fugiat aute eiusmod sit. Labore commodo in adipisicing et commodo in deserunt labore. Lorem ex voluptate ipsum et.</p>
</div>
</div>
<div class="col-12 col-lg-9">
<div class="br-4 bg-sky-lighter px-20 py-11">
<div class="row align-items-center justify-content-between">
<div class="col-4">
<p class="mb-0">Showing 48 of 286 results</p>
</div>
<div class="col-auto">
<div class="d-flex">
<div class="d-flex align-items-center">
<label for="" class="mr-5">Sort By:</label>
{% render '@form', {"type":"select"} %}
</div>
<div class="d-flex align-items-center ml-16">
<label for="" class="mr-5">View By:</label>
{% render '@form', {"type":"select"} %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"test": null,
"options": [
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Price Range"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "View in Room"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Availability"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Special Features"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Color / Finish"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Style"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Covering / Fabric"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Sofa Type"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Sectional Type"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Bed Size"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Small Spaces"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Mattress Type"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Mattress Size"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Recliner Type"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Construction Material"
}
}
]
},
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Manufacturers"
}
}
]
}
]
}
No notes defined.