Aeroporto di Bologna - Design System

App Banner 

<div class="c-app-banner " aria-label="">
    <div class="c-app-banner__inner">

        <div class="c-app-banner__image">
            <img class="c-app-banner__image--desktop" src="../../images/phone.png" alt="">
            <img class="c-app-banner__image--mobile" src="../../images/phone-mobile.png" alt="">
        </div>

        <div class="c-app-banner__row">
            <div class="c-app-banner__title">
                <p>Porta BLQ sempre con te</p>
            </div>

            <div class="c-app-banner__links">
                <p>Scarica l'app</p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="../../images/svgs/badge_appstore_it.svg" alt="Scarica su App Store" height="40">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../../images/svgs/Google_Play_Store_badge_IT.svg" alt="Disponibile su Google Play" height="40">
                        </a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>
 
<div class="c-app-banner {{ modifier }}" aria-label="{{ aria-label-title }}">
  <div class="c-app-banner__inner">
    
    <div class="c-app-banner__image">
      <img class="c-app-banner__image--desktop" src="{{ path img-path }}" alt="{{ img-alt }}">
      <img class="c-app-banner__image--mobile" src="{{ path img-mobile-path }}" alt="{{ img-alt }}">
    </div>

    <div class="c-app-banner__row">
      <div class="c-app-banner__title">
        <p>{{{ title }}}</p>
      </div>
      
      <div class="c-app-banner__links">
        <p>{{{ text }}}</p>
        <ul>
          <li>
            <a href="#">
              <img src="{{ path "/images/svgs/badge_appstore_it.svg" }}" alt="Scarica su App Store" height="40">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="{{ path "/images/svgs/Google_Play_Store_badge_IT.svg" }}" alt="Disponibile su Google Play" height="40">
            </a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>
 
{
  "img-path": "/images/phone.png",
  "img-mobile-path": "/images/phone-mobile.png",
  "img-alt": "",
  "title": "Porta BLQ sempre con te",
  "text": "Scarica l'app"
}
  • Content: 
    .c-app-banner {
  background-color: primary(night, 120);
  color: #fff;
  position: relative;
  z-index: $zIndex-3;

  // @include min-screen(bp(tablet-p)) {
  //   &:before {
  //     content: "";
  //     position: absolute;
  //     top: 0;
  //     right: 0;
  //     bottom: remify(120px);
  //     left: 0;
  //     background-color: primary(sky, 10);
  //     z-index: 1;
  //   }
  // }

}

.c-app-banner__inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  z-index: 2;
  max-width: remify($base-page-width);
  margin: 0 auto;
  padding: remify(24px) remify(16px);

  @include min-screen(bp(tablet-p)) {
    padding: 0 remify(24px);
    align-items: flex-end;
  }
}

.c-app-banner__row {
  @include min-screen(bp(tablet-p)) {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-end;
  }
}

.c-app-banner__image {
  img { 
    max-width: remify(108px); 
    vertical-align: bottom;
    margin-right: remify(8px);

    @include min-screen(bp(phone-p)) {
      margin-right: remify(16px);
    }
    @include min-screen(bp(phablet)) {
      margin-right: remify(24px);
    }
    @include min-screen(bp(tablet-p)) {
      max-width: remify(150px); 
      margin-right: remify(48px);
    }

  }

  .c-app-banner__image--desktop {
    display: none;
    @include min-screen(bp(tablet-p)) {
      display:block;
      margin-top: remify(-46px);
    }
  }

  .c-app-banner__image--mobile {
    display: block;
    @include min-screen(bp(tablet-p)) {
      display: none;
    }
  }
}


.c-app-banner__title {
  @include font-scale(level-6);
  padding: 0 0 remify(16px) 0;
  
  @include min-screen(bp(tablet-p)) {
      padding: 0 0 remify(34px) 0;
  }
}

.c-app-banner__links {
  margin-left: auto;
  margin-right: 0;
  padding: 0 0 remify(24px);
  @include font-scale(level-3);

  @include min-screen(bp(tablet-p)) {
    min-width: 280px;
  }

  ul {
    margin-top: remify(8px);
    display: flex;
    gap: remify(16px);
    flex-wrap: wrap;
  }

}
  • URL: /components/raw/app-banner/_app-banner.scss
  • Filesystem Path: src/views/02-molecules/app-banner/_app-banner.scss
  • Size: 2 KB

No notes defined.