Aeroporto di Bologna - Design System

Footer 

<footer class="c-footer ">
    <div class='c-footer__inner'>
        <div class="c-cityguide">

            <div class="c-cityguide__brand">

                <a href="" class="c-cityguide__logo">
                    <img src="../../images/svgs/logo-adb.svg" class="c-logo" alt="Homepage aeroporto di Bologna">
                </a>

                <div>
                    <div class="c-cityguide__socials">
                        <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-cityguide__lang">
                        <ul class="c-languages" aria-label="Seleziona la lingua del sito">
                            <li>
                                <a href="#" aria-label="Italiano">
                                    ita
                                </a>
                            </li>
                            <li>
                                <a href="#" aria-label="Inglese">
                                    eng
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="c-cityguide__cta">
                        <p class="c-cityguide__text">Entra nel nostro team</p>
                        <a href="#" class="c-link c-link--sky ">
                            <span>Lavora con noi</span>
                            <svg class="svg-24">
                                <use xlink:href="#ic_chevron_right_black_24px"></use>
                            </svg></a>
                    </div>
                </div>

            </div>

            <ul class="c-cityguide__nav" aria-label="Voli">
                <strong aria-hidden="true">Voli</strong>
                <li class="">
                    <a href="/components/preview/page-arrivals-departures#section-departures" aria-label="Voli in arrivo">

                        Voli in arrivo
                    </a>
                </li>
                <li class="">
                    <a href="/components/preview/page-arrivals-departures#section-arrivals" aria-label="Voli in partenza">

                        Voli in partenza
                    </a>
                </li>
                <li class="" data-label-content="Acquista online">
                    <a href="/components/preview/page-flights-destinations" aria-label="Destinazioni">

                        Destinazioni
                    </a>
                </li>
            </ul>
            <ul class="c-cityguide__nav" aria-label="Parcheggi">
                <strong aria-hidden="true">Parcheggi</strong>
                <li class="" data-label-content="Acquista online">
                    <a href="/components/preview/page-parkings-home" aria-label="Parcheggia in Aeroporto">

                        Parcheggia in Aeroporto
                    </a>
                </li>
                <li class="">
                    <a href="/components/preview/page-rates-conventions" aria-label="Tariffe e Convenzioni">

                        Tariffe e Convenzioni
                    </a>
                </li>
                <li class="">
                    <a href="/components/preview/page-where-to-pay" aria-label="Come e dove pagare">

                        Come e dove pagare
                    </a>
                </li>
                <li class="">
                    <a href="#" aria-label="Passeggeri DPR 151/2012">

                        Passeggeri DPR 151/2012
                    </a>
                </li>
            </ul>
            <ul class="c-cityguide__nav" aria-label="Shopping e servizi">
                <strong aria-hidden="true">Shopping e servizi</strong>
                <li class="">
                    <a href="#" aria-label="Negozi">

                        Negozi
                    </a>
                </li>
                <li class="">
                    <a href="#" aria-label="Ristoranti e Bar">

                        Ristoranti e Bar
                    </a>
                </li>
                <li class="">
                    <a href="#" aria-label="Servizi">

                        Servizi
                    </a>
                </li>
                <li class="" data-label-content="Acquista online">
                    <a href="#" aria-label="Lounge e Servizi VIP">

                        Lounge e Servizi VIP
                    </a>
                </li>
            </ul>
            <ul class="c-cityguide__nav" aria-label="Necessità particolari">
                <strong aria-hidden="true">Necessità particolari</strong>
                <li class="">
                    <a href="/components/preview/page-home-assistenze" aria-label="Assistenze speciali">
                        <svg class=" c-icon c-icon--24">
                            <use xlink:href="#ic-accessible-black-24px"></use>
                        </svg>
                        Assistenze speciali
                    </a>
                </li>
                <li class="">
                    <a href="/components/preview/page-routes-prm" aria-label="Famiglie e minori">

                        Famiglie e minori
                    </a>
                </li>
                <li class="">
                    <a href="/components/preview/page-routes-animals" aria-label="Animali al seguito">

                        Animali al seguito
                    </a>
                </li>
            </ul>
            <ul class="c-cityguide__nav" aria-label="Info pratiche">
                <strong aria-hidden="true">Info pratiche</strong>
                <li class="">
                    <a href="#" aria-label="Documenti">

                        Documenti
                    </a>
                </li>
                <li class="">
                    <a href="#" aria-label="Bagagli">

                        Bagagli
                    </a>
                </li>
                <li class="">
                    <a href="#" aria-label="Controlli in aeroporto">

                        Controlli in aeroporto
                    </a>
                </li>
                <li class="">
                    <a href="#" aria-label="Mappe">

                        Mappe
                    </a>
                </li>
                <li class="">
                    <a href="#" aria-label="App BLQ">

                        App BLQ
                    </a>
                </li>
                <li class="">
                    <a href="#" aria-label="Free Wi-Fi">

                        Free Wi-Fi
                    </a>
                </li>
            </ul>

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

            <div class="c-copyright__credits">
                <p>
                    <strong><span aria-hidden="true">©</span>
                        Copyright 2018 Aeroporto Guglielmo Marconi di Bologna S.p.A.</strong>
                    - Tutti i diritti riservati<br />
                    Via Triumvirato, 84 - 40132 Bologna (BO) - Italy - Partita IVA:
                    03145140376 - Capitale sociale 90.314.162,00 Euro i.v. - R.E.A. Bo N.
                    268716
                </p>

                <ul>
                    <li><a href="#">Credits</a></li>
                    <li><a href="#">Informativa cookie</a></li>
                    <li><a href="#">Informativa Privacy – Reg. UE n.679/2016 (“GDPR”) e Codice Privacy s.m.i.</a></li>
                    <li><a href="https://www.bologna-airport.it/System/files/2018/Parcheggi/InformativaVideosorveglianza.pdf">Informativa
                            privacy videosorveglianza</a></li>
                    <li><a href="#">Dichiarazione di accessibilità</a></li>
                    <li><a href="#">Lavora con noi</a></li>
                </ul>
            </div>

            <div class="c-copyright__partners">
                <a href="https://defence-industry-space.ec.europa.eu/eu-aeronautics-industry/alliance-zero-emission-aviation_en">
                    <img class="c-copyright__partner" src="../../images/AZEA_logo_colour.jpg" alt="Azea 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 class="c-copyright__partner" src="../../images/net_zero_logo.jpg" alt="Alt zero logo" />
                </a>
                <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 class="c-copyright__partner" src="../../images/aci_aha_2022.png" alt="ACI AHA logo" />
                </a>
            </div>

        </div>
    </div>
</footer>
<div class="c-dialog js-fr-dialogmodal " id="dialog-newsletter">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-newsletter-title">
        <div role="document">
            <p class="c-dialog__title" id="dialog-newsletter-title" aria-hidden="true">Iscriviti alla newsletter di Aeroporto di Bologna e riceverai periodicamente:</p>

            <div class="c-advantages">

                <div class="c-advantages__item">
                    <div class="c-media o-media ">
                        <img class="c-media__figure o-media__figure" src="../../images/svgs/stk_faq.svg" alt="Promozioni" height="" width="100">
                        <div class="c-media__body o-media__body">
                            <strong>Promozioni su Parcheggi, VIP Lounge e Voli</strong><br>Resta aggiornato su promozioni riguardanti i parcheggi ufficiali dell’Aeroporto, la VIP Lounge e sui voli in partenza da Bologna.
                        </div>
                    </div>
                </div>
                <hr aria-hidden="true">
                <div class="c-advantages__item">
                    <div class="c-media o-media ">
                        <img class="c-media__figure o-media__figure" src="../../images/svgs/stk_faq.svg" alt="Informazioni" height="" width="100">
                        <div class="c-media__body o-media__body">
                            <strong>Informazioni su nuove tratte in partenza da Bologna</strong><br>Scopri in anteprima le tratte che potrai raggiungere con volo diretto da Bologna.
                        </div>
                    </div>
                </div>
                <hr aria-hidden="true">
                <div class="c-advantages__item">
                    <div class="c-media o-media ">
                        <img class="c-media__figure o-media__figure" src="../../images/svgs/stk_faq.svg" alt="Programmazione eventi" height="" width="100">
                        <div class="c-media__body o-media__body">
                            <strong>Programmazione eventi</strong><br>Ricevi le news riguardanti gli eventi esclusivi all’interno della Marconi Business Lounge.
                        </div>
                    </div>
                </div>

            </div>

            <form class="c-form">
                <label for="email-newsletter" class="" aria-label="">

                    Indirizzo e-mail <span class="required-marker" aria-hidden="true">*</span>

                    <input id="email-newsletter" type="email" class="" placeholder="Inserisci il tuo indirizzo e-mail" value="">

                </label>

                <input type="checkbox" id="agree-privacy" name="privacy" class="u-visuallyhidden " role="group" aria-label="agree-privacy">

                <label for="agree-privacy" class="">
                    Ho letto e accettato <a href="#"><strong>l'informativa sulla privacy</strong></a>
                </label> <button type="submit" class="c-button c-button--submit c-button--large">

                    Iscríviti

                </button>
            </form>

            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>
 
<footer class="c-footer {{modifier}}">
  <div class='c-footer__inner'>
    {{render '@cityguide'}}
    {{render '@copyright'}}
  </div>
</footer>
{{render '@dialog--newsletter'}}
 
/* No context defined. */
  • Content: 
    .c-footer {
  background-color: #ffffff;
  padding: remify(60px) 0 remify(96px);
  color: primary(night, 100);

  a {
    color: primary(night, 100);
  }
}

.c-footer a:has(img) {
  display: inline-block;
}

.c-footer__inner {
  max-width: remify($base-page-width);
  margin: 0 auto;
  padding: 0 remify(16px);
}

/*------------------------------------*\
  Minimal modifier
\*------------------------------------*/

.c-footer--minimal .c-footer__inner {

  .c-cityguide {
    border-bottom: none;
    justify-content: flex-start;
  }
  .c-cityguide__brand {
    text-align: left;
  }
  .c-cityguide__socials {
    display: none;
  }

  .c-cityguide__brand,
  .c-cityguide__nav {
    flex: initial;
  }

  @include min-screen(bp(tablet-p)) { 
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .c-cityguide {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
      margin-right: remify(16px);
      flex: 0 0 250px;
    }

    .c-cityguide__logo {
      margin-bottom: 0;
      img {
        width: remify(212px);
      }
    }

    .c-copyright {
      flex-grow: 1;
      margin-bottom: 0;
    }

    .c-copyright__partners {
      justify-self: end;
    }

  }

}

/*------------------------------------*\
  Emergency modifier
\*------------------------------------*/

.c-footer--emergency {
  background-color: primary(night, 100);
  color: #ffffff;

  a,
  .c-copyright {
    color: #ffffff;
  }
}

/*------------------------------------*\
  Map detail view modifier
\*------------------------------------*/

// .c-footer--map-detail {
//   display: none;

//   @include min-screen (bp(tablet-p)) {
//     display: block;
//   }
// }
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: src/views/03-organisms/footer/_footer.scss
  • Size: 1.7 KB

No notes defined.