Vechtsport Online Components for Magento 2

Category Footer 

<div class="categorie-footer">
    <div class="categorie-footer__content">
        <h3 class="categorie-footer__title">Kom naar onze fysieke winkel!</h3>
        <h4 class="categorie-footer__subtitle">In eget orci nec nulla volutpat gravida nec ut magna. Cras cursus vel arcu vel scelerisque. Donec vehicula lectus lorem, quis egestas urna iaculis in. </h4>
        <button class="button button--skew categorie-footer__button" type="button" aria-label="Submit">
            Over ons
            <svg class="icon footer__icon" role="img">
                <title>Arrow right</title>
                <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
            </svg>

        </button>

    </div>

    <div class="categorie-footer__background">
        <div class="lazyload-wrapper ">
            <img class="image lazyload categorie-footer__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/category/category-footer-background.jpg" alt="category footer image">
        </div>

    </div>
</div>
 
<div class="categorie-footer">
    <div class="categorie-footer__content">
        <h3 class="categorie-footer__title">{{ Title }}</h3>
        <h4 class="categorie-footer__subtitle">{{ Subtitle }}</h4>
        {{ render '@button--icon' button }}
    </div>

    <div class="categorie-footer__background">
        {{ render '@image' image }}
    </div>
</div>
 
{
  "Title": "Kom naar onze fysieke winkel!",
  "Subtitle": "In eget orci nec nulla volutpat gravida nec ut magna. Cras cursus vel arcu vel scelerisque. Donec vehicula lectus lorem, quis egestas urna iaculis in. ",
  "button": {
    "tag": "button",
    "class": "button--skew categorie-footer__button",
    "attributes": "type=\"button\" aria-label=\"Submit\"",
    "text": "Over ons",
    "icon": {
      "id": "angle-right",
      "title": "Arrow right",
      "class": "footer__icon"
    }
  },
  "image": {
    "class": "categorie-footer__image",
    "src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
    "dataSrc": "/images/category/category-footer-background.jpg",
    "alt": "category footer image"
  }
}
  • Content: 
    .categorie-footer {
    display: flex;
    align-items: center;

    // height: 20vh;
    background: $black;

    @include mq($screen-l) {
        height: 97vh;
    }

    &__background {
        display: flex;
        justify-content: flex-end;
        flex-basis: 70%;
    }

    &__content {
        display: flex;
        justify-content: flex-start;
        flex-basis: 30%;
        flex-direction: column;
    }

    &__image {
        max-height: 410px;
    }

    &__title {
        font-size: 30px;
        font-family: $font-family-evogria;
        font-weight: $font-weight-normal;
        font-style: $font-style-italic;
        text-transform: capitalize;
        color: $white;
        line-height: 110%;
    }

    &__subtitle {
        font-size: 15px;
        font-family: $font-family-saira;
        font-weight: 500;
        color: #c4c4c4;
        line-height: 165%;
    }

    &__button {
        font-family: "Evogria Regular";
        font-weight: normal;
        font-size: 15px;
        font-style: italic;
        text-transform: uppercase;
        border-radius: 4px;

        display: flex;
        justify-content: space-between;
    }

    & .footer_icon {
        padding: 0;
    }
}
  • URL: /components/raw/category-footer/_category-footer.scss
  • Filesystem Path: build/components/03-modules/category-footer/_category-footer.scss
  • Size: 1.2 KB

There are no notes for this item.