Vechtsport Online Components for Magento 2

Catalog Item: Default 

<div class="catalog-item " tabindex="0">

    <div class="catalog-item__image">
        <a href="#" class="" tabindex="-1">
            <div class="lazyload-wrapper ">
                <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
            </div>

        </a>
    </div>
    <div class="catalog-item__content">
        <h2 class="catalog-item__title">
            <a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
        </h2>

        <div class="catalog-item__price">
            <div class="price  ">
                <span class="price__value price__value--special ">
                    <ins aria-label="On sale at: €109,95">

                        €

                        109,95

                    </ins>
                </span>
                <span class="price__value price__value--old ">
                    <del aria-label="Price reduced from: €129,95">
                        €
                        129,95

                    </del>
                </span>
            </div>

        </div>
    </div>

    <div class="catalog-item__actions">
        <button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
            <span class="catalog-item__cart-text"></span>
            <svg class="icon icons__single-icon button__icon" role="img">
                <title>Plus</title>
                <use xlink:href="/images/icons-sprite.svg#plus"></use>
            </svg>

        </button>

    </div>
</div>
 
<div class="catalog-item {{ modifierClass }}" tabindex="0">
    {{#if badge}}
        {{ render (component badge.name) badge.context }}
    {{/if}}

    <div class="catalog-item__image">
        <a
                href="#"
                class=""
                tabindex="-1"
        >
            {{ render '@image' image merge=true }}
        </a>
    </div>
    <div class="catalog-item__content">
        <h2 class="catalog-item__title">
            <a href="">{{ title.text }}</a>
        </h2>

        <div class="catalog-item__price">
            {{ render '@price--with-special-price' price }}
        </div>
    </div>

    <div class="catalog-item__actions">
        {{ render '@button--icon' primaryAction }}
    </div>
</div>
 
{
  "image": {
    "dataSrc": "/images/product/UFC_MMA_GLOVES.png"
  },
  "primaryAction": {
    "tag": "button",
    "text": "<span class=\"catalog-item__cart-text\"></span>",
    "class": "button--icon button--plus catalog-item__primary-action",
    "icon": {
      "id": "plus",
      "title": "Plus",
      "class": "icons__single-icon button__icon"
    },
    "attributes": "type=\"button\" aria-label=\"Add to Cart\""
  },
  "title": {
    "text": "UFC MMA Handschoenen zonder duim - Zwart/Wit"
  }
}
  • Content: 
    .catalog-item {
    position: relative;
    padding: $spacer--1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: $spacer--1;
    border-radius: 4px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    height: calc(100% - 1rem);

    &__image {
        margin: 0 auto;
        width: auto;
        height: auto;
        padding: 0;
        border-radius: 4px 4px 0 0;
    }

    &__content {
        justify-self: flex-end;
        margin-top: auto;
        padding: 0 $spacer--1 $spacer--1;
    }

    &__title {
        height: 46px;
        overflow: hidden;

        & .link {
            font-size: 16px;
            font-weight: bold;
            font-family: $font-family-saira;
        }
    }

    &__actions {
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0;
    }

    &--fixed-width {
        width: 230px;
        margin-bottom: 1rem;

        @include mq($screen-m) {
            margin-bottom: 0;
        }
    }

    &--black {
        background-color: $black;


        & .link {
            color: $white;
        }

        & .price__value {
            color: $white;
        }
    }
}
  • URL: /components/raw/catalog-item/_catalog-item.scss
  • Filesystem Path: build/components/02-elements/catalog-item/_catalog-item.scss
  • Size: 1.2 KB

There are no notes for this item.