<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": "product-grid-item--wishlist",
  "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\""
    },
    "edit": {
      "tag": "a",
      "class": "",
      "icon": {
        "id": "edit",
        "title": "edit",
        "class": "button__icon",
        "hidden": true
      },
      "attributes": "href=\"#\" aria-label=\"Edit product\""
    },
    "remove": {
      "tag": "button",
      "class": "",
      "icon": {
        "id": "remove",
        "title": "Remove",
        "class": "button__icon",
        "hidden": true
      },
      "attributes": "type=\"button\" aria-label=\"Remove product from wishlist\""
    }
  },
  "wisthlistComment": {
    "class": "product-grid-item__wishlist-comment",
    "label": {
      "text": "Comment",
      "hidden": true
    },
    "field": {
      "id": "wishlist-comment-product-1",
      "name": "wishlist-comment-product-1",
      "placeholder": "Comment",
      "type": "text"
    }
  },
  "wishlistQtyLabel": {
    "text": "Quantity:",
    "for": "qty-product-1"
  },
  "wishlistQtyUpdate": {
    "input": {
      "id": "qty-product-1",
      "name": "qty-product-1"
    }
  },
  "wishlistAddToCart": {
    "tag": "button",
    "class": "",
    "text": "Add to cart",
    "attributes": "type=\"button\""
  }
}
  • Content:
    $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;
    
  • URL: /components/raw/category-grid-item/_category-grid-item-variables.scss
  • Filesystem Path: build/components/Organisms/category-grid-item/_category-grid-item-variables.scss
  • Size: 292 Bytes
  • Content:
    @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;
        }
    }
    
  • URL: /components/raw/category-grid-item/_category-grid-item.scss
  • Filesystem Path: build/components/Organisms/category-grid-item/_category-grid-item.scss
  • Size: 996 Bytes

There are no notes for this item.