<div class="category-grid-item" tabindex="0">
<a href="https://snurky.test/beenbreukpakket.html" title="Beenbreuk pakket Lenen
" class="category-grid-item__link" tabindex="0" aria-label="Beenbreuk pakket Lenen">
<picture class="category-grid-item__image image">
<img src="/images/catalog-grid-item/bedlegerig-pakket.jpeg" alt="Beenbreuk pakket Lenen
">
</picture>
<div class="category-grid-item__content">
<div class="badge badge--top-left">
<span class="badge__text">Lenen
</span>
</div>
<h3 class="category-grid-item__text">
Beenbreuk pakket Lenen
</h3>
<span class="category-grid-item__icon">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
</span>
</div>
</a>
</div>
<div class="category-grid-item" tabindex="0">
<a href="https://snurky.test/beenbreukpakket.html" title="Beenbreuk pakket Lenen
" class="category-grid-item__link" tabindex="0" aria-label="Beenbreuk pakket Lenen">
<picture class="category-grid-item__image image">
<img src="/images/catalog-grid-item/bedlegerig-pakket.jpeg" alt="Beenbreuk pakket Lenen
">
</picture>
<div class="category-grid-item__content">
<div class="badge badge--top-left">
<span class="badge__text">Lenen
</span>
</div>
<h3 class="category-grid-item__text">
Beenbreuk pakket Lenen
</h3>
<span class="category-grid-item__icon">
{{
render '@button--icon'
secondaryActions.wishlist
merge=true
}}
</span>
</div>
</a>
</div>
{
"tag": "div",
"class": "",
"swatches": true,
"productBadges": {
"class": "product-grid-item__badges",
"badges": [
{
"contentElement": "badge",
"contentContext": {
"text": "-15%"
}
},
{
"contentElement": "badge--new",
"contentContext": {
"text": "New"
}
}
]
},
"image": {
"wrapperClass": "product-grid-item__image-wrapper",
"dataSrc": "/images/product/product-368_552.jpg"
},
"name": "Long product name can have maximum 50 caractere...",
"price": {
"name": "price",
"context": {
"regularPrice": "1 400",
"specialPrice": "",
"prefix": {
"tag": "",
"text": "$"
},
"suffix": {
"tag": "",
"text": ""
}
}
},
"rating": {
"class": "product-grid-item__rating rating--secondary"
},
"secondaryActions": {
"wishlist": {
"tag": "button",
"class": "add-to-wishlist",
"icon": {
"id": "heart",
"title": "Heart",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Add to Wish List\""
},
"compare": {
"tag": "button",
"class": "",
"icon": {
"id": "compare",
"title": "Compare",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Add to compare\""
},
"addToCart": {
"tag": "button",
"class": "button--add-to",
"icon": {
"id": "shopping-cart",
"title": "Add to cart",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"submit\" aria-label=\"Add to cart\""
},
"class": "product-grid-item__actions--ee",
"wishlistDropdown": {
"class": "dropdown-list--buttons product-view__multiwishlist",
"dropdowns": [
{
"itemTag": "button",
"itemAttributes": "type=\"button\" aria-expanded=\"false\"",
"title": "dropdown title",
"textClass": "dropdown-list__text margin-hz-s",
"id": "dropdown-buttons-content",
"class": "button button--icon",
"iconBefore": {
"id": "heart",
"title": "Heart",
"class": "button__icon",
"attributes": "aria-hidden=\"true\""
},
"collapse": {
"id": "angle-down",
"title": "Arrow Down",
"class": "dropdown-list__icon button__icon margin-0",
"attributes": "aria-hidden=\"true\""
},
"contentElement": "list"
}
]
},
"requisitionDropdown": {
"class": "dropdown-list--buttons",
"dropdowns": [
{
"itemTag": "button",
"itemAttributes": "type=\"button\" aria-expanded=\"false\"",
"title": "dropdown title",
"textClass": "dropdown-list__text margin-hz-s",
"id": "dropdown-buttons-content",
"class": "button button--icon",
"iconBefore": {
"id": "requisition-list",
"title": "Requisition List",
"class": "button__icon",
"attributes": "aria-hidden=\"true\""
},
"collapse": {
"id": "angle-down",
"title": "Arrow Down",
"class": "dropdown-list__icon button__icon margin-0",
"attributes": "aria-hidden=\"true\""
},
"contentElement": "list"
}
]
}
}
}
$category-grid-item--border-radius : 0 !default;
$category-grid-item__image--border-radius : 5px !default;
$category-grid-item--padding : 10px !default;
$category-grid-item__content--margin : 10px 0 0 !default;
@import "category-grid-item-variables";
.category-grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: $category-grid-item--border-radius;
padding: $category-grid-item--padding;
a {
width: 100%;
display: flex;
flex-direction: column;
position: relative;
border-radius: $category-grid-item--border-radius;
}
&__image.image {
width: 100%;
height: auto;
position: relative;
border-radius: $category-grid-item--border-radius;
img {
border-radius: $category-grid-item__image--border-radius $category-grid-item__image--border-radius 0 0;
}
}
&__content {
width: 100%;
display: flex;
align-items: center;
margin: $category-grid-item__content--margin;
justify-content: space-between;
}
&__text {
margin: 0;
}
}
There are no notes for this item.