solarwood components for Magento 2

Category Grid Item: Default 

<div class="category-grid-item" tabindex="0">
    <a href="https://solarwood.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/teaser/teaser-medium-girl_472-432.jpg" 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://solarwood.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/teaser/teaser-medium-girl_472-432.jpg" 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\""
    }
  }
}
  • 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.