Vechtsport Online Components for Magento 2

USPS 

<div class="usps-home">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="usps-home__description">
                    <svg class="icon icons__item" role="img">
                        <title>Van</title>
                        <use xlink:href="/images/icons-sprite.svg#custom-van"></use>
                    </svg>
                    GRATIS VERZENDING VANAF € 50,-
                </div>
            </div>
            <div class="col-md-4">
                <div class="usps-home__description">
                    <svg class="icon icons__item" role="img">
                        <title>Shop</title>
                        <use xlink:href="/images/icons-sprite.svg#custom-shop"></use>
                    </svg>
                    FYSIEKE WINKEL IN GRONINGEN
                </div>
            </div>
            <div class="col-md-4">
                <div class="usps-home__description">
                    <svg class="icon icons__item" role="img">
                        <title>Box</title>
                        <use xlink:href="/images/icons-sprite.svg#custom-box"></use>
                    </svg>
                    BINNEN 2 DAGEN THUISBEZORGD
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="usps-home">
    <div class="container">
        <div class="row">
            {{#each usps as |usp| }}
                <div class="col-md-4">
                    <div class="usps-home__description">
                        {{ render '@icon' usp.icon }} {{ usp.text }}
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</div>
 
{
  "usps": [
    {
      "text": "GRATIS VERZENDING VANAF € 50,-",
      "class": "gray",
      "icon": {
        "id": "custom-van",
        "title": "Van",
        "class": "icons__item"
      }
    },
    {
      "text": "FYSIEKE WINKEL IN GRONINGEN",
      "class": "gray",
      "icon": {
        "id": "custom-shop",
        "title": "Shop",
        "class": "icons__item"
      }
    },
    {
      "text": "BINNEN 2 DAGEN THUISBEZORGD",
      "class": "gray",
      "icon": {
        "id": "custom-box",
        "title": "Box",
        "class": "icons__item"
      }
    }
  ],
  "logo": {
    "class": "header__logo",
    "logoSVG": true,
    "ariaLabel": "Home page link",
    "imageAlt": "Alpaca Logo",
    "imageAttributes": "",
    "imageClass": "",
    "imageSrc": "/images/logo/logo.svg",
    "href": "#"
  },
  "minicartTrigger": {
    "icon": {
      "id": "shopping-cart",
      "title": "Shopping cart",
      "class": "header-button__icon"
    },
    "text": "Cart",
    "link": "/cart",
    "ariaLabel": "Shopping cart dropdown trigger"
  },
  "minicartPopup": {
    "class": "header__minicart-content",
    "popupId": "popup-minicart",
    "popupTrigger": false,
    "content": "minicart-content",
    "script": true
  }
}
  • Content: 
    .usps {
    display: none;
    background-color: $white;
    width: 100%;
    padding: $spacer--large 0 0 0;

    @include mq($screen-m) {
        display: block;
    }

    &__description {
        display: flex;
        align-items: center;

        font-family: $font-family-saira;
        font-style: normal;
        font-weight: 600;
        font-size: 15px;
        line-height: 165%;
        color: $gray-medium;
        text-transform: uppercase;
    }

    & .icons__item {
        fill: $red;
        margin-right: 12px;
        width: 28px;
        height: 28px;
    }

}
  • URL: /components/raw/usps/_usps.scss
  • Filesystem Path: build/components/02-elements/usps/_usps.scss
  • Size: 583 Bytes

There are no notes for this item.