Vechtsport Online Components for Magento 2

Get The App 

<div class="get-the-app">

    <div class="get-the-app__image-wrapper">
        <img class="get-the-app__image" src="/images/footer/mobileapp.svg">
    </div>

    <div class="get-the-app__content">
        <h3 class="get-the-app__title">Profiteer van onze gratis app!</h3>
        <h4 class="get-the-app__subtitle">Deze kunt u GRATIS downloaden in de AppStore of in GooglePlay</h4>

        <div class="get-the-app__content--image-wrapper">
            <a class="appleappstore" href="https://itunes.apple.com/us/app/vechtsportonline.nl/id1065211769" target="_blank">
                <img class="get-the-app__content--image" src="https://images.prismic.io/vechtsportonline/1d916959-66cc-4e36-b52a-d60ed2515866_available-on-the-app-store.svg?auto=compress,format" alt="Apple App Store ">
            </a>

            <a class="googleplay" href="https://play.google.com/store/apps/details?id=nl.vechtsportonline" target="_blank">
                <img class="get-the-app__content--image" src="https://images.prismic.io/vechtsportonline/bc04d1fc-f22c-405c-96fd-98d3389c1ea8_get-it-on-google-play.svg?auto=compress,format" alt="Google Play Store ">
            </a>
        </div>
    </div>

</div>
 
<div class="get-the-app">
    
    <div class="get-the-app__image-wrapper">
        <img class="get-the-app__image" src="/images/footer/mobileapp.svg">
    </div>

    <div class="get-the-app__content">
        <h3 class="get-the-app__title">{{ Title }}</h3>
        <h4 class="get-the-app__subtitle">{{ Subtitle }}</h4>
    
        <div class="get-the-app__content--image-wrapper">
            <a class="appleappstore" href="https://itunes.apple.com/us/app/vechtsportonline.nl/id1065211769" target="_blank">
                <img class="get-the-app__content--image" src="https://images.prismic.io/vechtsportonline/1d916959-66cc-4e36-b52a-d60ed2515866_available-on-the-app-store.svg?auto=compress,format" alt="Apple App Store ">
            </a>
            
            <a class="googleplay" href="https://play.google.com/store/apps/details?id=nl.vechtsportonline" target="_blank">
                <img class="get-the-app__content--image" src="https://images.prismic.io/vechtsportonline/bc04d1fc-f22c-405c-96fd-98d3389c1ea8_get-it-on-google-play.svg?auto=compress,format" alt="Google Play Store ">
            </a>
        </div>
    </div>

</div>
 
{
  "Title": "Profiteer van onze gratis app!",
  "Subtitle": "Deze kunt u GRATIS downloaden in de AppStore of in GooglePlay",
  "button": {
    "tag": "button",
    "class": "footer-top__button footer__button",
    "icon": {
      "id": "angle-right",
      "title": "Arrow right",
      "class": "footer__icon footer__icon-textbutton"
    },
    "attributes": "role=\"button\" tabindex=\"0\"",
    "text": "Download App"
  }
}
  • Content: 
    .get-the-app {
    background-color: $black;
    display: flex;
    justify-content: center;
    flex-direction: row;

    @include mq($screen-m) {
        margin-top: $spacer--2;
    }

    &__image-wrapper {
        display: flex;
        align-items: flex-end;
        
        @include mq($screen-s) {
            padding-right: $spacer--1;
        }
    }

    &__image {
        max-width: min-content;
        max-height: max-content;
        margin-left: -1rem;
        zoom: 250%;

        @include mq($screen-s) {
            zoom: normal;
        }

        @include mq($screen-m) {
            margin-top: -1rem;
            margin-left: 0;
        }
    }
    
    &__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0.5rem;

        &--image-wrapper {
            display: flex;
            flex-direction: column;
            margin-top: 1rem;
            
            @include mq($screen-s) {
                flex-direction: row;
            }
        }

        &--image {
            width: 100px;
            margin-right: 1rem;
            margin-bottom: 0.5rem;

            @include mq($screen-s) {
                width: 125px;
                margin-bottom: 0;
            }

            @include mq($screen-m) {
                width: 150px;
            }
        }
    }

    &__title {
        color: $white;
        font-size: $font-size-extra-large;
        font-weight: $font-weight-base;
        text-transform: uppercase;

        @include mq($screen-m) {
            font-size: $font-size-xxl;
        }
    }

    &__subtitle {
        color: $gray-light;
        font-size: 12px;
        font-family: $font-family-saira;
        font-weight: $font-weight-base;
        font-style: italic;

        @include mq($screen-m) {
            font-size: 15px;
        }
    }
}
  • URL: /components/raw/get-the-app/get-the-app.scss
  • Filesystem Path: build/components/03-modules/get-the-app/get-the-app.scss
  • Size: 1.9 KB

There are no notes for this item.