<div class="category-grid ">
<div class="heading-container category-grid__header">
<h2 class="heading-container__heading text-center h1-style">Featured Categories</h2>
<p class="heading-container__subheading text-center p-lg">Shop amazing and stylish furniture in our most popular categories.</p>
</div>
<div class="category-card category-grid__card">
<a href="#" class="category-card__link">
<img class="category-card__image" src="../../images/category/0190889_living-room-furniture_600.jpeg" alt="Living Room Furniture Image">
<span class="category-card__title">Living Room Furniture</span>
</a>
</div>
<div class="category-card category-grid__card">
<a href="#" class="category-card__link">
<img class="category-card__image" src="../../images/category/0052383_mattresses_600.jpeg" alt="Mattresses Image">
<span class="category-card__title">Mattresses</span>
</a>
</div>
<div class="category-card category-grid__card">
<a href="#" class="category-card__link">
<img class="category-card__image" src="../../images/category/0190891_bedroom-furniture_600.jpeg" alt="Bedroom Furniture Image">
<span class="category-card__title">Bedroom Furniture</span>
</a>
</div>
<div class="category-card category-grid__card">
<a href="#" class="category-card__link">
<img class="category-card__image" src="../../images/category/0190890_dining-room-furniture_600.jpeg" alt="Dining Room Furniture Image">
<span class="category-card__title">Dining Room Furniture</span>
</a>
</div>
<div class="category-card category-grid__card">
<a href="#" class="category-card__link">
<img class="category-card__image" src="../../images/category/0181838_office-furniture_600.jpeg" alt="Office Furniture Image">
<span class="category-card__title">Office Furniture</span>
</a>
</div>
<div class="category-card category-grid__card">
<a href="#" class="category-card__link">
<img class="category-card__image" src="../../images/category/0190892_entertainment-centers_600.jpeg" alt="Entertainment Centers Image">
<span class="category-card__title">Entertainment Centers</span>
</a>
</div>
<div class="category-grid__all">
<a class="a-btn a-btn--default">
Elit et Exercitation
</a>
</div>
</div>
<div class="category-grid {{modifierClasses}}">
{% render '@heading-container', headingContainer, true %}
{% for category in categories -%}
{% render '@category-card', category, true %}
{%- endfor %}
{% if all %}
<div class="category-grid__all">
{% render '@button--all-link' %}
</div>
{% endif %}
</div>
{
"headingContainer": {
"heading": {
"tag": "h2",
"text": "Featured Categories",
"class": "h1-style"
},
"subheading": {
"tag": "p",
"text": "Shop amazing and stylish furniture in our most popular categories.",
"class": "p-lg"
},
"modifierClasses": "category-grid__header"
},
"categories": [
{
"name": "Living Room Furniture",
"href": "#",
"image": {
"src": "/images/category/0190889_living-room-furniture_600.jpeg",
"alt": "Living Room Furniture Image"
},
"modifierClasses": "category-grid__card"
},
{
"name": "Mattresses",
"href": "#",
"image": {
"src": "/images/category/0052383_mattresses_600.jpeg",
"alt": "Mattresses Image"
},
"modifierClasses": "category-grid__card"
},
{
"name": "Bedroom Furniture",
"href": "#",
"image": {
"src": "/images/category/0190891_bedroom-furniture_600.jpeg",
"alt": "Bedroom Furniture Image"
},
"modifierClasses": "category-grid__card"
},
{
"name": "Dining Room Furniture",
"href": "#",
"image": {
"src": "/images/category/0190890_dining-room-furniture_600.jpeg",
"alt": "Dining Room Furniture Image"
},
"modifierClasses": "category-grid__card"
},
{
"name": "Office Furniture",
"href": "#",
"image": {
"src": "/images/category/0181838_office-furniture_600.jpeg",
"alt": "Office Furniture Image"
},
"modifierClasses": "category-grid__card"
},
{
"name": "Entertainment Centers",
"href": "#",
"image": {
"src": "/images/category/0190892_entertainment-centers_600.jpeg",
"alt": "Entertainment Centers Image"
},
"modifierClasses": "category-grid__card"
}
],
"all": {
"tag": "a",
"href": "#",
"text": "Shop All Furniture",
"icon": "fa-arrow-alt-circle-right",
"family": "far"
}
}
.category-grid {
$this: &;
display: flex;
flex-wrap: wrap;
flex-direction: row;
&__header {
flex: 0 0 100%;
}
&__card {
flex: 0 0 100%;
padding-block: 0;
@include media-md-up {
flex: 0 0 50%;
}
@include media-lg-up {
flex: 0 0 33.333%;
}
}
&__all {
flex: 0 0 100%;
margin: rem(32px) 0;
padding: 0 rem(12px);
text-align: right;
}
}
No notes defined.