Aeroporto di Bologna - Design System

Coinvolgimento utente 

<div class="c-involve">

    <div class="c-involve__item">
        <div class="c-socials">

            <ul>
                <li><a href="#" aria-label="instagram"><svg class="">
                            <use xlink:href="#ic-social-instagram"></use>
                        </svg></a></li>
                <li><a href="#" aria-label="facebook"><svg class="">
                            <use xlink:href="#ic-social-facebook"></use>
                        </svg></a></li>
                <li><a href="#" aria-label="twitter"><svg class="">
                            <use xlink:href="#ic-social-twitter"></use>
                        </svg></a></li>
                <li><a href="#" aria-label="linkedin"><svg class="">
                            <use xlink:href="#ic-social-linkedin"></use>
                        </svg></a></li>
                <li><a href="#" aria-label="youtube"><svg class="">
                            <use xlink:href="#ic-social-youtube"></use>
                        </svg></a></li>
            </ul>

        </div>
    </div>

    <div class="c-involve__item">
        <div class="c-apps">

            <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 class="c-involve__item">

        <p>Free WiFi in aeroporto</p>

        <img src="../../images/svgs/logo-wifi.svg" width="81" alt="Free WiFi in aeroporto">

    </div>

    <div class="c-involve__item c-involve__certifications">

        <p>Certificazioni</p>

        <a href="https://www.bologna-airport.it/la-societa/sala-stampa/news/aeroporto-di-bologna-primo-in-italia-e-tra-i-primi-al-mondo-a-ricevere-l-aci-airport-health-accreditation-/?idC=62350&idO=1962968">
            <img src="../../images/aci_aha_accredited.jpg" width="81" alt="ACI AHA logo">
        </a>

        <a href="https://www.bologna-airport.it/la-societa/sala-stampa/comunicati-stampa/netzero2050-l-aeroporto-di-bologna-si-impegna-a-raggiungere-%E2%80%9Cemissioni-zero%E2%80%9D-entro-il-2050/?idC=62420&idO=1699377&urlBack=back">
            <img src="../../images/net_zero_logo.jpg" width="80" alt="Alt zero logo">
        </a>
    </div>

</div>
 
<div class="c-involve">

  <div class="c-involve__item">
    {{ render "@socials" }}
  </div>
  
  {{!-- <a class="c-involve__newsletter js-fr-dialogmodal-open" href="#" role="button" aria-controls="dialog-newsletter">
    {{> @icon symbol="ic-email-black-24px" class="c-icon--18" }}
    <span>Iscriviti alla newsletter</span>
  </a> --}}

  <div class="c-involve__item">
    {{ render "@apps" }}
  </div>

  <div class="c-involve__item">

      <p>Free WiFi in aeroporto</p>

      <img src="{{ path "/images/svgs/logo-wifi.svg" }}" width="81" alt="Free WiFi in aeroporto">

  </div>
  
  <div class="c-involve__item c-involve__certifications">

      <p>Certificazioni</p>

      <a href="https://www.bologna-airport.it/la-societa/sala-stampa/news/aeroporto-di-bologna-primo-in-italia-e-tra-i-primi-al-mondo-a-ricevere-l-aci-airport-health-accreditation-/?idC=62350&idO=1962968">
        <img src="{{ path "/images/aci_aha_accredited.jpg" }}" width="81" alt="ACI AHA logo">
      </a>

      <a href="https://www.bologna-airport.it/la-societa/sala-stampa/comunicati-stampa/netzero2050-l-aeroporto-di-bologna-si-impegna-a-raggiungere-%E2%80%9Cemissioni-zero%E2%80%9D-entro-il-2050/?idC=62420&idO=1699377&urlBack=back">
        <img src="{{ path "/images/net_zero_logo.jpg" }}" width="80" alt="Alt zero logo">
      </a>
  </div>

</div>
 
/* No context defined. */
  • Content: 
    .c-involve {

  @include min-screen (bp(tablet)) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  > * {
    margin-bottom: remify(48px);   
    width: 100%;
    text-align: center;
    
    @include min-screen (bp(tablet)) {
      width: 50%;
    }

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

    div:last-of-type{
      @include min-screen (bp(tablet)) {
        margin-bottom: 0;
      }
    }

  }

  .c-footer & {
    border-bottom: remify(1px) solid primary(night, 60);

    @include min-screen (bp(tablet)) {
      padding: remify(40px) 0 remify(8px);
    }

  }

  .c-involve__newsletter {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: remify(1px) solid primary(night, 80);
    border-radius: remify(4px);
    padding: remify(8px) remify(16px);
    text-transform: uppercase;
    // margin-left: auto;
    // margin-right: auto;
    // max-width: remify(320px);

    svg {
      fill: currentColor;
      margin-right: remify(8px);
    }

  }

  & .o-portal a:first-child img {
    margin-right: 0.5rem;
  }


  .c-involve__item {
    text-align: left;
    p {
      text-transform: uppercase;
      color: #fff;
      margin-bottom: remify(32px);
    }

  }

  .c-involve__certifications {
    a { margin-right: remify(16px); }
  }

}
  • URL: /components/raw/involve/_involve.scss
  • Filesystem Path: src/views/03-organisms/involve/_involve.scss
  • Size: 1.4 KB

No notes defined.