<div class="c-starting-grid c-starting-grid--billboards ">
<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-billboards_tablist c-tablist">
<ul class="c-billboards_tabs c-tablist__tabs" role="tablist">
<li>
<a href="#partenze" role="tab" aria-current="true"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_flight_takeoff_black_24px"></use>
</svg> Partenze</a>
</li>
<li>
<a href="#arrivi" role="tab"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_flight_land_black_24px"></use>
</svg> Arrivi</a>
</li>
</ul>
<div class="c-billboards ">
<div class="c-billboards__item c-tablist__section" id="partenze">
<div class="c-billboard c-billboard--departures ">
<input class="c-billboard__toggle" type="checkbox" name="billboard" id="radio-toggle-billboard-departures" aria-hidden="true">
<label class="c-billboard__label" for="radio-toggle-billboard-departures">
<div class="icon"><svg class="c-icon c-icon--32">
<use xlink:href="#ic_flight_takeoff_black_24px"></use>
</svg></div>
<div class="text">
<p>Partenze</p>
<small>Ultimo aggiornamento 10:10</small>
</div>
<div class="status">
<div class='c-status c-status--delay'>
<div class='c-status__img'>
<svg height='69' viewBox='0 0 69 69' width='69' xmlns='http://www.w3.org/2000/svg'>
<g fill='none' fill-rule='evenodd'>
<circle cx='34.5' cy='34.5' fill='#e8ecf2' r='34.5'></circle>
<g fill-rule='nonzero'>
<g transform='translate(11 28.96)'>
<path d='m30.7721607 21.4158365c2.2189691.839156 1.9580818 3.757661.003183 5.0503395-1.5308386 1.0122683-4.6580008 1.0122683-9.3814866 0-.8940848-.0000222-1.7454867-.429994-2.3394757-1.1814733l-3.0583814-3.8692307-15.996.000208v-18.450432h13.768882l2.2117455-1.76942938c.7010315-.56081379 1.5720533-.86634662 2.4698045-.86634662h14.6916754c1.1108814 0 2.0114286 1.18007711 2.0114286 2.635776s-.9005472 2.635776-2.0114286 2.635776h2.1371429c1.3886016 0 2.5142857 1.18007711 2.5142857 2.635776s-1.1256841 2.635776-2.5142857 2.635776h2.3885714c1.5274618 0 2.7657143 1.1800771 2.7657143 2.635776s-1.2382525 2.635776-2.7657143 2.635776h1.5085714c1.666322 0 3.0171429 1.1800771 3.0171429 2.635776s-1.3508209 2.635776-3.0171429 2.635776z' fill='#fecd05'></path>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472'></rect>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472' y='16.4736'></rect>
<rect fill='#2b72b0' height='12.519936' rx='2.306304' width='11.202048' x='1.317888' y='5.930496'></rect>
<path d='m5.76177737 14.669171-1.32383065-1.3238307c-.38235783-.3886368-.52634303-.7502363-.14083294-1.1357464.38551008-.3855101 1.18857604.3159297 1.57721282.6982875l.5143082.5143082 1.29884335-1.7318187c.32900917-.4386788 1.02957775-1.3957871 1.55630478-1.0605269.52672703.3352603.32900915.8466666 0 1.2853455l-1.98574597 2.6476613c-.17268596.2302592-.43679316.3742518-.72388715.394667-.02360831.0016548-.04707872.0024822-.07041124.0024822-.26329289 0-.51579118-.1046467-.7019612-.290829z' fill='#fff'></path>
</g>
<g transform='translate(30.36 14)'>
<path d='m22.528 11.264c0 2.9968125-1.1634219 5.8172813-3.2757656 7.942-2.1111407 2.123-4.9214688 3.3025781-7.9143281 3.3214844-.0073907 0-.0154688.0005156-.0228594 0-.0166719.0005156-.0338594.0005156-.0510469.0005156-3.00832814 0-5.83704686-1.1713281-7.96451564-3.2991406-2.1278125-2.1272969-3.29948436-4.9561875-3.29948436-7.9648594 0-3.00867186 1.17167186-5.83704686 3.29948436-7.96485936 2.12746878-2.12746878 4.9561875-3.29914064 7.96451564-3.29914064.0171875 0 .0338594 0 .0510469.00051563.0079062 0 .0158125 0 .0237187.00034374 2.9925157.0194219 5.8026719 1.19865627 7.9134688 3.32165627 2.1123437 2.12471872 3.2757656 4.94501563 3.2757656 7.94148436z' fill='#ff4a05'></path>
<g fill='#fff'>
<path d='m13.1965625 6.62028127v5.03525003c0 1.0350312-.8418438 1.8770468-1.8767031 1.8770468h-.0048125c-.4834844-.0140937-.9826094-.2093437-1.32257817-.5494844-.35423437-.3545781-.54965623-.8258593-.54965623-1.3275624v-5.03525003c0-1.02351563.84975-1.84765627 1.8722344-1.87704691h.0048125c1.0348593 0 1.8767031.8421875 1.8767031 1.87704691z'></path>
<path d='m13.0961875 15.9121875c0 .9798594-.7968125 1.7766719-1.7766719 1.7766719h-.0044687c-.9772813-.0022344-1.7718594-.7981875-1.7718594-1.7766719 0-.9781406.7945781-1.7740938 1.7718594-1.7763281h.0044687c.9798594 0 1.7766719.7968125 1.7766719 1.7763281z'></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class='c-status__txt'>
<strong>Presentati con ampio anticipo in aeroporto</strong>
<small>Causa controlli aggiuntivi dovuti al Covid-19</small>
</div>
</div>
</div>
</label>
<div class="c-billboard__table">
<table class="c-table c-table--flights">
<caption class="u-visuallyhidden"></caption>
<thead>
<tr>
<th class="no-mobile">Compagnia</th>
<th>Destinazione</th>
<th>N° Volo</th>
<th>Orario stimato</th>
<th>Stato</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile"><a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a></td>
<td><strong>LONDON LHR</strong></td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info LONDON LHR CP9827">CP9827</a></td>
<td>14:00 <strong class="is-negative">14:20</strong></td>
<td class="situation">Check-in C 45→48</td>
</tr>
</tbody>
</table>
<p class="foot">
<a href="../preview/page-arrivals-departures#section-departures.html">Tutte le partenze</a>
</p>
</div>
</div>
<div class="c-billboard__status status">
<div class='c-status c-status--delay'>
<div class='c-status__img'>
<svg height='69' viewBox='0 0 69 69' width='69' xmlns='http://www.w3.org/2000/svg'>
<g fill='none' fill-rule='evenodd'>
<circle cx='34.5' cy='34.5' fill='#e8ecf2' r='34.5'></circle>
<g fill-rule='nonzero'>
<g transform='translate(11 28.96)'>
<path d='m30.7721607 21.4158365c2.2189691.839156 1.9580818 3.757661.003183 5.0503395-1.5308386 1.0122683-4.6580008 1.0122683-9.3814866 0-.8940848-.0000222-1.7454867-.429994-2.3394757-1.1814733l-3.0583814-3.8692307-15.996.000208v-18.450432h13.768882l2.2117455-1.76942938c.7010315-.56081379 1.5720533-.86634662 2.4698045-.86634662h14.6916754c1.1108814 0 2.0114286 1.18007711 2.0114286 2.635776s-.9005472 2.635776-2.0114286 2.635776h2.1371429c1.3886016 0 2.5142857 1.18007711 2.5142857 2.635776s-1.1256841 2.635776-2.5142857 2.635776h2.3885714c1.5274618 0 2.7657143 1.1800771 2.7657143 2.635776s-1.2382525 2.635776-2.7657143 2.635776h1.5085714c1.666322 0 3.0171429 1.1800771 3.0171429 2.635776s-1.3508209 2.635776-3.0171429 2.635776z' fill='#fecd05'></path>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472'></rect>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472' y='16.4736'></rect>
<rect fill='#2b72b0' height='12.519936' rx='2.306304' width='11.202048' x='1.317888' y='5.930496'></rect>
<path d='m5.76177737 14.669171-1.32383065-1.3238307c-.38235783-.3886368-.52634303-.7502363-.14083294-1.1357464.38551008-.3855101 1.18857604.3159297 1.57721282.6982875l.5143082.5143082 1.29884335-1.7318187c.32900917-.4386788 1.02957775-1.3957871 1.55630478-1.0605269.52672703.3352603.32900915.8466666 0 1.2853455l-1.98574597 2.6476613c-.17268596.2302592-.43679316.3742518-.72388715.394667-.02360831.0016548-.04707872.0024822-.07041124.0024822-.26329289 0-.51579118-.1046467-.7019612-.290829z' fill='#fff'></path>
</g>
<g transform='translate(30.36 14)'>
<path d='m22.528 11.264c0 2.9968125-1.1634219 5.8172813-3.2757656 7.942-2.1111407 2.123-4.9214688 3.3025781-7.9143281 3.3214844-.0073907 0-.0154688.0005156-.0228594 0-.0166719.0005156-.0338594.0005156-.0510469.0005156-3.00832814 0-5.83704686-1.1713281-7.96451564-3.2991406-2.1278125-2.1272969-3.29948436-4.9561875-3.29948436-7.9648594 0-3.00867186 1.17167186-5.83704686 3.29948436-7.96485936 2.12746878-2.12746878 4.9561875-3.29914064 7.96451564-3.29914064.0171875 0 .0338594 0 .0510469.00051563.0079062 0 .0158125 0 .0237187.00034374 2.9925157.0194219 5.8026719 1.19865627 7.9134688 3.32165627 2.1123437 2.12471872 3.2757656 4.94501563 3.2757656 7.94148436z' fill='#ff4a05'></path>
<g fill='#fff'>
<path d='m13.1965625 6.62028127v5.03525003c0 1.0350312-.8418438 1.8770468-1.8767031 1.8770468h-.0048125c-.4834844-.0140937-.9826094-.2093437-1.32257817-.5494844-.35423437-.3545781-.54965623-.8258593-.54965623-1.3275624v-5.03525003c0-1.02351563.84975-1.84765627 1.8722344-1.87704691h.0048125c1.0348593 0 1.8767031.8421875 1.8767031 1.87704691z'></path>
<path d='m13.0961875 15.9121875c0 .9798594-.7968125 1.7766719-1.7766719 1.7766719h-.0044687c-.9772813-.0022344-1.7718594-.7981875-1.7718594-1.7766719 0-.9781406.7945781-1.7740938 1.7718594-1.7763281h.0044687c.9798594 0 1.7766719.7968125 1.7766719 1.7763281z'></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class='c-status__txt'>
<strong>Presentati con ampio anticipo in aeroporto</strong>
<small>Causa controlli aggiuntivi dovuti al Covid-19</small>
</div>
</div>
</div>
</div>
<div class="c-billboards__item c-tablist__section" hidden id="arrivi">
<div class="c-billboard c-billboard--arrivals ">
<input class="c-billboard__toggle" type="checkbox" name="billboard" id="radio-toggle-billboard-arrivals" aria-hidden="true">
<label class="c-billboard__label" for="radio-toggle-billboard-arrivals">
<div class="icon"><svg class="c-icon c-icon--32">
<use xlink:href="#ic_flight_land_black_24px"></use>
</svg></div>
<div class="text">
<p>Arrivi</p>
<small>Ultimo aggiornamento 10:10</small>
</div>
</label>
<div class="c-billboard__table">
<table class="c-table c-table--flights">
<caption class="u-visuallyhidden"></caption>
<thead>
<tr>
<th class="no-mobile">Compagnia</th>
<th>Provenienza</th>
<th>N° Volo</th>
<th>Orario stimato</th>
<th>Stato</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile"><a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a></td>
<td><strong>MADRID</strong></td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info MADRID AZ8783">AZ8783</a></td>
<td>14:00 <strong class="is-positive">13:50</strong></td>
<td class="situation">Atterrato</td>
</tr>
</tbody>
</table>
<p class="foot">
<a href="../preview/page-arrivals-departures#section-arrivals.html">Tutti gli arrivi</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-starting-grid c-starting-grid--billboards {{ modifier }}">
<div class="c-starting-grid__banner">
{{> @carousel--gallery shopping-banner }}
</div>
<div class="c-starting-grid__chess">
{{ render "@billboards" 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>"
}
}
.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;
}
}
}
No notes defined.