Starting grid: Chinese

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-starting-grid ">
    <div class="c-starting-grid__banner">
        <section class="c-carousel c-carousel--gallery c-carousel--equalH c-carousel--shopping" aria-hidden="true">

            <div class="jsInstance owl-carousel">
                <div class="c-carousel__item">
                    <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="c-carousel__item">
                    <div class="c-showcase ">

                        <div class="c-showcase__image">
                            <img src="../../images/showcase-russia.jpg" alt="Titolo negozio 2">
                        </div>

                        <div class="c-showcase__footer">
                            <p class="c-showcase__title">Titolo negozio 2</p>
                            <p class="c-showcase__subtitle">Sottotitoli per negozio 2 lorem ipsum</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="c-carousel__item">
                    <div class="c-showcase ">

                        <div class="c-showcase__image">
                            <img src="../../images/showcase-china.jpg" alt="Titolo negozio 3">
                        </div>

                        <div class="c-showcase__footer">
                            <p class="c-showcase__title">Titolo negozio 3</p>
                            <p class="c-showcase__subtitle">Sottotitoli per negozio 3 lorem ipsum</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>

        </section>
    </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-lost-baggage-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Bagagli smarriti</a></span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-lost-object-24px"></use>
                                </svg> <span class="c-icon-list__text"><a href="#">Oggetti smarriti</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-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 {{ modifier }}">
  <div class="c-starting-grid__banner">
    {{> @carousel--gallery shopping-banner }}
  </div>
  <div class="c-starting-grid__chess">
    {{ render "@chess--chinese" chess }}
  </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>"
  }
}

File:

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

Handle: @starting-grid--chinese
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/starting-grid/starting-grid--chinese.hbs
References (2): @carousel--gallery, @chess--chinese
Referenced by (1): @page-home-travel--chinese

No notes defined.