Aeroporto di Bologna - Design System

Starting grid: Split 

<div class="c-starting-grid c-starting-grid--split ">
    <h2>Scopri i servizi e negozi dell'aeroporto</h2>
    <div class="c-starting-grid__banner">
        <div class="item item--first">
            <div class="c-showcase ">

                <div class="c-showcase__logo">
                    <img src="../../images/aeronautica-militare-shopping.jpg" alt="Aeronautica militare">
                </div>

                <div class="c-showcase__image">
                    <img src="../../images/pilot-collection.jpg" alt="Primavera-Estate 2018">
                </div>

                <div class="c-showcase__footer">
                    <p class="c-showcase__title">Primavera-Estate 2018</p>
                    <p class="c-showcase__subtitle">Ti aspettiamo in area imbarchi con i <strong>nuovi arrivi!</strong></p>
                    <a href="/components/preview/page-flights-destination" class="c-link--primary">
                        Scopri di più
                        <svg class="">
                            <use xlink:href="#"></use>
                        </svg></a>
                </div>

            </div>
        </div>
        <div class="item item--second">
            <div class="c-showcase ">

                <div class="c-showcase__logo">
                    <img src="../../images/svgs/youfirst.svg" alt="Youfirst">
                </div>

                <div class="c-showcase__image">
                    <img src="../../images/showcase-tbilisi.jpg" alt="Meno tempo, più comfort">
                </div>

                <div class="c-showcase__footer">
                    <p class="c-showcase__title">Meno tempo, più comfort</p>
                    <p class="c-showcase__subtitle">Scopri Youfirst, il servizio VIP con staff dedicato!</p>
                    <a href="/components/preview/page-flights-destination" class="c-link--primary">
                        Scopri di più
                        <svg class="">
                            <use xlink:href="#"></use>
                        </svg></a>
                </div>

            </div>
        </div>
    </div>
    <div class="c-starting-grid__chess">
        <div class="c-chess ">
            <div class="c-chess__item ">
                <div class="c-pawn ">
                    <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-bar" aria-hidden="true">
                    <label class="c-pawn__label" for="chkbx-shop-bar">
                        Bar & Ristoranti
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg> </label>
                    <div class="c-pawn__content ">
                        <ul class="c-icon-list" aria-label="Servizi disponibili in Bar &amp; Ristoranti">
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic_free_breakfast_black_24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Bar</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic_restaurant_menu_black_24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Ristoranti</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-more-horiz-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Tutti</a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="c-chess__item ">
                <div class="c-pawn ">
                    <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-shops" aria-hidden="true">
                    <label class="c-pawn__label" for="chkbx-shop-shops">
                        Negozi
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg> </label>
                    <div class="c-pawn__content ">
                        <ul class="c-icon-list" aria-label="Tipologie di negozi">
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-fashion-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Fashion & Style</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-shopping-black-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">General store</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-gift-25px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Duty free</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-more-horiz-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Tutti</a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="c-chess__item ">
                <div class="c-pawn ">
                    <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-services" aria-hidden="true">
                    <label class="c-pawn__label" for="chkbx-shop-services">
                        Servizi in aeroporto
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg> </label>
                    <div class="c-pawn__content ">
                        <ul class="c-icon-list" aria-label="Servizi disponibili in aeroporto">
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-deposito-bagagli-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Deposito bagagli</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-pharmacy-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Farmacia</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-bank-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Banca</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-more-horiz-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Tutti</a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="c-chess__item ">
                <div class="c-pawn ">
                    <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-vip" aria-hidden="true">
                    <label class="c-pawn__label" for="chkbx-shop-vip">
                        Lounge e servizi VIP
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg> </label>
                    <div class="c-pawn__content ">
                        <ul class="c-icon-list" aria-label="Servizi vip e lounge">
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic_weekend_black_24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Vip Lounge</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-star-new-black-18px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Youfirst</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-people-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Area meeting</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-event-seat-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Eventi in Lounge</a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="c-chess__item ">
                <div class="c-pawn ">
                    <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-transport" aria-hidden="true">
                    <label class="c-pawn__label" for="chkbx-shop-transport">
                        Trasporti da/per
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg> </label>
                    <div class="c-pawn__content ">
                        <ul class="c-icon-list" aria-label="Trasporti da e per Aeroporto">
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic_directions_car_black_24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">In auto</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic_directions_bus_black_24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">In bus</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic_local_taxi_black_24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">In taxi</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-more-horiz-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Tutti</a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="c-chess__item ">
                <div class="c-pawn ">
                    <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-maps" aria-hidden="true">
                    <label class="c-pawn__label" for="chkbx-shop-maps">
                        Mappe
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg> </label>
                    <div class="c-pawn__content ">
                        <ul class="c-icon-list" aria-label="Mappe Aeroporto">
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-map-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Piano terra</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-map-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Primo piano</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-map-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Parcheggi</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-map-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Servizi al PRM</a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="c-starting-grid c-starting-grid--split {{ modifier }}">
  <h2>{{{ title }}}</h2>
  <div class="c-starting-grid__banner">
    <div class="item item--first">
      {{> @showcase first-banner }}
    </div>
    <div class="item item--second">
      {{> @showcase second-banner }}
    </div>
  </div>
  <div class="c-starting-grid__chess">
    {{ render "@chess" chess merge=true }}
  </div>
</div>
 
{
  "title": "Scopri i servizi e negozi dell'aeroporto",
  "shopping-banner": {
    "modifier": "c-carousel--gallery c-carousel--equalH c-carousel--shopping",
    "items": [
      {
        "componentName": "@showcase",
        "componentInstance": {
          "bg-path": "/images/pilot-collection.jpg",
          "title": "Primavera-Estate 2018",
          "subtitle": "Ti aspettiamo in area imbarchi con i <strong>nuovi arrivi!</strong>",
          "logo": {
            "path": "/images/aeronautica-militare-shopping.jpg",
            "alt": "Aeronautica militare"
          },
          "link": {
            "text": "Scopri di più",
            "url": "/components/preview/page-flights-destination",
            "modifier": "c-link--primary",
            "svg": true
          }
        }
      },
      {
        "componentName": "@showcase",
        "componentInstance": {
          "bg-path": "/images/showcase-russia.jpg",
          "title": "Titolo negozio 2",
          "subtitle": "Sottotitoli per negozio 2 lorem ipsum",
          "logo": null,
          "link": {
            "text": "Scopri di più",
            "url": "/components/preview/page-flights-destination",
            "modifier": "c-link--primary",
            "svg": true
          }
        }
      },
      {
        "componentName": "@showcase",
        "componentInstance": {
          "bg-path": "/images/showcase-china.jpg",
          "title": "Titolo negozio 3",
          "subtitle": "Sottotitoli per negozio 3 lorem ipsum",
          "logo": null,
          "link": {
            "text": "Scopri di più",
            "url": "/components/preview/page-flights-destination",
            "modifier": "c-link--primary",
            "svg": true
          }
        }
      }
    ]
  },
  "highlight-emergency": {
    "modifier": "c-highlight--emergency c-highlight--grid u-mb--large",
    "text": "<p>Attenzione: Causa emergenza Covid-19, si avvisa la gentile clientela, che l’esercizio commerciale è temporaneamente chiuso. Ci scusiamo per il disagio.</p> <p>Gli esercizi aperti sono:</p> <ul><li>Bar \"La Ghiotta\" - <a href=\"#\">Scopri di più →</a></li><li>Farmacia - <a href=\"#\">Scopri di più →</a></li><li>Carrefour - <a href=\"#\">Scopri di più →</a></li></ul>"
  },
  "first-banner": {
    "bg-path": "/images/pilot-collection.jpg",
    "title": "Primavera-Estate 2018",
    "subtitle": "Ti aspettiamo in area imbarchi con i <strong>nuovi arrivi!</strong>",
    "logo": {
      "path": "/images/aeronautica-militare-shopping.jpg",
      "alt": "Aeronautica militare"
    },
    "link": {
      "text": "Scopri di più",
      "url": "/components/preview/page-flights-destination",
      "modifier": "c-link--primary",
      "svg": true
    }
  },
  "second-banner": {
    "bg-path": "/images/showcase-tbilisi.jpg",
    "title": "Meno tempo, più comfort",
    "subtitle": "Scopri Youfirst, il servizio VIP con staff dedicato!",
    "logo": {
      "path": "/images/svgs/youfirst.svg",
      "alt": "Youfirst"
    },
    "link": {
      "text": "Scopri di più",
      "url": "/components/preview/page-flights-destination",
      "modifier": "c-link--primary",
      "svg": true
    }
  }
}
  • Content: 
    .c-starting-grid {

  h2 {
    text-align: center;
    @include font-scale(level-4, bold);
    margin-bottom: remify(24px);
    color: primary(night, 100);
  }

}

.c-starting-grid__banner,
.c-starting-grid__chess {
  position: relative
}

.c-starting-grid__banner {
  z-index: 1;

  .c-main--home-eng & {
    order: 1;
    width: 100%;
    @include min-screen(bp(tablet-p)) {
      order: initial;
      width: 100%;
    }
  }
}

.c-starting-grid__chess {
  z-index: 2;
  
  .c-main--home-eng & {
    order: 0;
    margin: remify(40px) 0;
    @include min-screen(bp(tablet-p)) {
      margin: initial;
    }
  }
}

/*------------------------------------*\
  Split modifier
\*------------------------------------*/

.c-starting-grid--split {

  .c-starting-grid__banner {

    display: flex;

    @supports (display: grid) {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: remify(16px);
      @include min-screen(bp(tablet-p)) {
        grid-template-columns: 1fr 1fr;
      }
    }

    margin-bottom: remify(16px);

    @include min-screen(bp(phablet)) {
      margin-bottom: 0;
    }

  }

  .c-starting-grid__banner .item {
    flex: 1 1 50%;

    & > * {
      height: 100%;
    }

  }

    .c-starting-grid__banner .item--second {
      
      display: none;
      
      @include min-screen(bp(tablet-p)) {
        display: block;
        margin-left: remify(16px);
        @supports (display: grid) {
          margin-left: 0;
        }
      }
    }

}

/*------------------------------------*\
  Billboards modifier
\*------------------------------------*/

.c-starting-grid--billboards {
  
  .c-starting-grid__banner {
    margin: 0 auto;
    max-width: remify(1130px);
  }

  .c-main--home-eng & {
    display: flex;
    flex-direction: column;
    @include min-screen(bp(tablet-p)) {
      display: initial;
    }
  }

}
  • URL: /components/raw/starting-grid/_starting-grid.scss
  • Filesystem Path: src/views/03-organisms/starting-grid/_starting-grid.scss
  • Size: 1.9 KB

No notes defined.