<div class="hero hero--secondary">
    <div class="hero__wrapper">
        <div class="hero__text">
            <h1 class="hero__text--heading--first">
                kom naar onze <span class="hero__text--color">fysieke winkel!</span>
            </h1>
            <a class="button button--skew" href="#" title="I am a link button">
                Over ons
                <svg class="icon button__icon" role="img">
                    <title>angle-right</title>
                    <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
                </svg>

            </a>

        </div>
    </div>
    <div class="hero__background">
        <picture class="image ">

            <img class="" src="/images/hero/vso-hero-homepage.jpg" alt="" loading="lazy" />
        </picture>

    </div>
</div>
<div class="hero hero--secondary">
    <div class="hero__wrapper">
        <div class="hero__text">
            <h1 class="hero__text--heading--first">
                kom naar onze <span class="hero__text--color">fysieke winkel!</span>
            </h1>
            {{ render '@button--skew' skew }}
        </div>
    </div>
    <div class="hero__background">
        {{ render '@image--background' heroBackground }}
    </div>
</div>
{
  "heroImage": {
    "dataSrc": "/images/product/UFC_MMA_GLOVES.png"
  },
  "heroBackground": {
    "src": "/images/hero/vso-hero-homepage.jpg"
  },
  "heroTitle": "kom naar onze fysieke winkel!",
  "heroClass": "",
  "skew": {
    "name": "skew",
    "tag": "a",
    "class": "button--skew",
    "icon": {
      "id": "angle-right",
      "title": "angle-right",
      "class": "button__icon"
    },
    "attributes": "href=\"#\" title=\"I am a link button\"",
    "text": "Over ons"
  },
  "variants": [
    {
      "name": "secondary",
      "heroClass": "hero--secondary",
      "context": {
        "heroClass": "hero--secondary"
      }
    }
  ]
}

There are no notes for this item.