Aeroporto di Bologna - Design System

Mappa links 

<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-cityguide">

  <div class="c-cityguide__brand">

    <a href="{{ home-url }}" class="c-cityguide__logo">
      {{ render "@logo" }}
    </a>

    <div>
      <div class="c-cityguide__socials">
        {{ render "@socials" }}
      </div>
      <div class="c-cityguide__lang">
        {{> @languages--flags language-list }}
      </div>
      {{#notEqualTo workWithUs-isvisible false }}
      <div class="c-cityguide__cta">
        <p class="c-cityguide__text">Entra nel nostro team</p>
        {{ render "@link--sky" work-with-us merge=true }}
      </div>
      {{/notEqualTo}}
    </div>

  </div>

  {{#each lists}}
  <ul class="c-cityguide__nav" aria-label="{{ this.title }}">
    <strong aria-hidden="true">{{ this.title }}</strong>
    {{#each this.items}}
    <li class="{{ this.class }}" {{#if this.label-content}}data-label-content="{{this.label-content}}" {{/if}}>
      <a href="{{this.url}}" aria-label="{{ this.text }}">
        {{#if this.has-icon}}{{> @icon class=" c-icon c-icon--24" symbol="ic-accessible-black-24px" }}{{/if}}
        {{ this.text }}
      </a>
    </li>
    {{/each}}
  </ul>
  {{/each}}

</div>
 
{
  "language-list": {
    "languages": [
      {
        "text": "ita",
        "url": "#",
        "aria-label": "Italiano"
      },
      {
        "text": "eng",
        "url": "#",
        "aria-label": "Inglese"
      }
    ]
  },
  "lists": [
    {
      "title": "Voli",
      "items": [
        {
          "text": "Voli in arrivo",
          "url": "/components/preview/page-arrivals-departures#section-departures"
        },
        {
          "text": "Voli in partenza",
          "url": "/components/preview/page-arrivals-departures#section-arrivals"
        },
        {
          "text": "Destinazioni",
          "url": "/components/preview/page-flights-destinations",
          "label-content": "Acquista online"
        }
      ]
    },
    {
      "title": "Parcheggi",
      "items": [
        {
          "text": "Parcheggia in Aeroporto",
          "url": "/components/preview/page-parkings-home",
          "label-content": "Acquista online"
        },
        {
          "text": "Tariffe e Convenzioni",
          "url": "/components/preview/page-rates-conventions"
        },
        {
          "text": "Come e dove pagare",
          "url": "/components/preview/page-where-to-pay"
        },
        {
          "text": "Passeggeri DPR 151/2012",
          "url": "#"
        }
      ]
    },
    {
      "title": "Shopping e servizi",
      "items": [
        {
          "text": "Negozi",
          "url": "#"
        },
        {
          "text": "Ristoranti e Bar",
          "url": "#"
        },
        {
          "text": "Servizi",
          "url": "#"
        },
        {
          "text": "Lounge e Servizi VIP",
          "url": "#",
          "label-content": "Acquista online"
        }
      ]
    },
    {
      "title": "Necessità particolari",
      "items": [
        {
          "text": "Assistenze speciali",
          "has-icon": true,
          "url": "/components/preview/page-home-assistenze"
        },
        {
          "text": "Famiglie e minori",
          "url": "/components/preview/page-routes-prm"
        },
        {
          "text": "Animali al seguito",
          "url": "/components/preview/page-routes-animals"
        }
      ]
    },
    {
      "title": "Info pratiche",
      "items": [
        {
          "text": "Documenti",
          "url": "#"
        },
        {
          "text": "Bagagli",
          "url": "#"
        },
        {
          "text": "Controlli in aeroporto",
          "url": "#"
        },
        {
          "text": "Mappe",
          "url": "#"
        },
        {
          "text": "App BLQ",
          "url": "#"
        },
        {
          "text": "Free Wi-Fi",
          "url": "#"
        }
      ]
    }
  ],
  "work-with-us": {
    "name": "default",
    "text": "Lavora con noi",
    "url": "#",
    "svg": true
  }
}
  • Content: 
    .c-cityguide {
  text-align: left;
  @include min-screen(bp(tablet)) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  @include min-screen(bp(desktop)) {
     justify-content: space-between;
  }

  .c-footer & {
    padding-bottom: remify(16px);
    border-bottom: remify(1px) solid primary(night, 20)
  }

  .c-cityguide__brand,
  .c-cityguide__nav {
    flex: 0 1 33%;
    @include min-screen(bp(desktop)) {
      flex: 1 1 auto;
    }
  }

  .c-cityguide__brand {
    text-align: center;
    
    .c-cityguide__logo {
      display: block;
      margin-bottom: remify(16px);
    }

    .c-cityguide__socials {
      margin-bottom: remify(8px);
    }

    .c-cityguide__lang {
      .c-languages {
        @include min-screen(bp(tablet-p)) {
        display: flex;
        justify-content: center;
        }
      }
    }
  }

  .c-cityguide__nav {
    text-align: center;
    margin-bottom: 24px;
    font-size: remify(16px);
    display: none;
    @include min-screen(bp(tablet)) {
      display: block;
    }

    > * {
      display: block;
      margin-bottom: remify(8px);
    }

    strong {
      text-transform: uppercase;
      color: primary(night, 100);
    }

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

      a svg {
        width: 20px;
        height: 20px;
        margin-right: remify(4px);
        vertical-align: text-bottom;
        background-color: primary(night, 120);
        border-radius: remify(4px);
        color: #fff;
        fill: #fff;
      }

    }

  }
}

.c-cityguide__cta {

  padding: remify(24px) 0 remify(40px);
  
  .c-link {
    color: white;
    margin-top: remify(8px);
  }
}
  • URL: /components/raw/cityguide/_cityguide.scss
  • Filesystem Path: src/views/02-molecules/cityguide/_cityguide.scss
  • Size: 1.7 KB

No notes defined.