Aeroporto di Bologna - Design System

Footer: External 

<footer class="c-footer c-footer--minimal">
    <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>
        <div class="c-copyright">

            <div class="c-copyright__credits">
                <p>
                    <strong><span aria-hidden="true">©</span>
                        Copyright 2026 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="#">Dichiarazione di accessibilità</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>
 
<footer class="c-footer {{modifier}}">
  <div class='c-footer__inner'>
    <div class="c-cityguide">
      <div class="c-cityguide__brand">
        <a href="{{ home-url }}" class="c-cityguide__logo">
          {{ render "@logo" }}
        </a>
      </div>
    </div>
    {{> @copyright copyright}}
  </div>
</footer>
 
{
  "modifier": "c-footer--minimal",
  "copyright": {
    "items": [
      {
        "text": "Dichiarazione di accessibilità",
        "url": "#"
      }
    ]
  }
}
  • 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.