<div class="c-tablist c-tablist--flights-times">
<div class="status">
<div class="status__child">
<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 class="status__child days">
<a href="#"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_chevron_left_black_24px"></use>
</svg>
<p class="u-visuallyhidden">Mese precedente</p>
</a>
<div class="today">
<p>Oggi</p>
<small>8 Maggio 2018</small>
</div>
<a href="#"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg>
<p class="u-visuallyhidden">Mese successivo</p>
</a>
</div>
<div class="status__child refresh">
<button type="button" class="c-button c-button--adding">
Aggiorna ↻
</button> <small class="last-update last-update--desktop">Ultimo aggiornamento 14:30</small>
</div>
</div>
<ul class="c-tablist__tabs" role="tablist">
<li>
<a href="#section-departures" role="tab" class="departures" aria-current="true" aria-selected="true">
<span aria-hidden="true"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_flight_takeoff_black_24px"></use>
</svg></span>
Partenze
</a>
</li>
<li>
<a href="#section-arrivals" role="tab" class="arrivals" aria-current="false" aria-selected="false">
<span aria-hidden="true"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_flight_land_black_24px"></use>
</svg></span>
Arrivi
</a>
</li>
</ul>
<section class="c-tablist__section" id="section-departures">
<div class="flight-items">
<div class="c-flight-info-cards ">
<div class="c-flight-info-cards__button">
<button type="button" class="c-button c-button--ghost">
Mostra 10 voli precedenti
</button>
</div>
<ul class="c-flight-info-cards__list">
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card c-flight-info-card--past">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<div class="c-flight-info-cards__currentTime">
<p>Adesso sono le 17:50</p>
</div>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card c-flight-info-card--delayed">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
<span class="c-rounded-label c-rounded-label--negative" aria-label="">
22:03
</span>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Imbarco</p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Imbarco terminato</p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Decollato</p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card c-flight-info-card--delayed">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
<span class="c-rounded-label c-rounded-label--negative" aria-label="">
22:03
</span>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Decollato 22:03</p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
<span class="c-rounded-label c-rounded-label--positive" aria-label="">
17:50
</span>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p><strong class="u-color-negative">Dirottato</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
</ul>
<div class="c-flight-info-cards__button">
<button type="button" class="c-button c-button--ghost">
Mostra 10 voli successivi
</button>
</div>
</div>
</div>
<small class="last-update last-update--mobile">Ultimo aggiornamento 14:30</small>
</section>
<section class="c-tablist__section" id="section-arrivals">
<div class="flight-items">
<div class="c-flight-info-cards ">
<div class="c-flight-info-cards__button">
<button type="button" class="c-button c-button--ghost">
Mostra 10 voli precedenti
</button>
</div>
<ul class="c-flight-info-cards__list">
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card c-flight-info-card--past">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<div class="c-flight-info-cards__currentTime">
<p>Adesso sono le 17:50</p>
</div>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card c-flight-info-card--delayed">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
<span class="c-rounded-label c-rounded-label--negative" aria-label="">
22:03
</span>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Imbarco</p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Imbarco terminato</p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Decollato</p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card c-flight-info-card--delayed">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
<span class="c-rounded-label c-rounded-label--negative" aria-label="">
22:03
</span>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p>Decollato 22:03</p>
<p>Gate <strong>5</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
<span class="c-rounded-label c-rounded-label--positive" aria-label="">
17:50
</span>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<p><strong class="u-color-negative">Dirottato</strong></p>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
</ul>
<div class="c-flight-info-cards__button">
<button type="button" class="c-button c-button--ghost">
Mostra 10 voli successivi
</button>
</div>
</div>
</div>
<small class="last-update last-update--mobile">Ultimo aggiornamento 14:30</small>
</section>
</div>
<div class="c-tablist c-tablist--flights-times">
<div class="status">
<div class="status__child">
{{ render "@status--delay" }}
</div>
<div class="status__child days">
<a href="#">{{> @icon prev-month }}<p class="u-visuallyhidden">Mese precedente</p></a>
<div class="today">
<p>Oggi</p>
<small>8 Maggio 2018</small>
</div>
<a href="#">{{> @icon next-month }}<p class="u-visuallyhidden">Mese successivo</p></a>
</div>
<div class="status__child refresh">
{{> @button refresh-btn }}
<small class="last-update last-update--desktop">Ultimo aggiornamento 14:30</small>
</div>
</div>
<ul class="c-tablist__tabs" role="tablist">
<li>
<a href="#section-departures" role="tab" class="departures" aria-current="true" aria-selected="true" >
<span aria-hidden="true">{{> @icon departures-icon }}</span>
Partenze
</a>
</li>
<li>
<a href="#section-arrivals" role="tab" class="arrivals" aria-current="false" aria-selected="false">
<span aria-hidden="true">{{> @icon arrivals-icon }}</span>
Arrivi
</a>
</li>
</ul>
{{!-- Departures --}}
<section class="c-tablist__section" id="section-departures">
<div class="flight-items">
{{ render "@flight-info-cards" }}
</div>
<small class="last-update last-update--mobile">Ultimo aggiornamento 14:30</small>
</section>
{{!-- End departures --}}
{{!-- Arrivals --}}
<section class="c-tablist__section" id="section-arrivals">
<div class="flight-items">
{{ render "@flight-info-cards" }}
</div>
<small class="last-update last-update--mobile">Ultimo aggiornamento 14:30</small>
</section>
{{!-- End arrivals --}}
{{!-- Desktop time switcher --}}
{{!-- <div class="c-tablist__time-switcher">
{{ render "@time-switcher" }}
</div> --}}
</div>
{
"home-it": true,
"tab": [
{
"anchor-id": "section-1",
"tab-text": "Section 1",
"tab-content-title": "Section title 1",
"tab-content-text": "<p>111 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere nemo nihil dolor reprehenderit blanditiis dignissimos a nostrum. Quam, neque? Omnis non, facere modi adipisci et dicta. Voluptate, quo. Quia, adipisci.</p>"
},
{
"anchor-id": "section-2",
"tab-text": "Section 2",
"tab-content-title": "Section title 2",
"tab-content-text": "<p>222 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere nemo nihil dolor reprehenderit blanditiis dignissimos a nostrum. Quam, neque? Omnis non, facere modi adipisci et dicta. Voluptate, quo. Quia, adipisci.</p>"
},
{
"anchor-id": "section-3",
"tab-text": "Section 3",
"tab-content-title": "Section title 3",
"tab-content-text": "<p>333 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere nemo nihil dolor reprehenderit blanditiis dignissimos a nostrum. Quam, neque? Omnis non, facere modi adipisci et dicta. Voluptate, quo. Quia, adipisci.</p>"
}
],
"departures-icon": {
"symbol": "ic_flight_takeoff_black_24px",
"class": "c-icon c-icon--24"
},
"arrivals-icon": {
"symbol": "ic_flight_land_black_24px",
"class": "c-icon c-icon--24"
},
"prev-month": {
"symbol": "ic_chevron_left_black_24px",
"class": "c-icon c-icon--24"
},
"next-month": {
"symbol": "ic_chevron_right_black_24px",
"class": "c-icon c-icon--24"
},
"refresh-btn": {
"type": "button",
"text": "Aggiorna ↻",
"modifier": "c-button--adding"
},
"time-switch": {
"modifier": "c-time-switcher--flights-times"
}
}
.c-tablist {
position: relative;
text-align: center;
// only IE 10 & 11
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
z-index: 2;
}
main & {
grid-column: main;
}
.c-tablist__tabs {
padding: 0;
display: inline-flex;
position: relative;
z-index: 1;
margin: 0 auto;
border-radius: remify(16px);
border: 4px solid primary(night, 20);
background-color: primary(night, 20);
}
.c-tablist__tabs li,
.c-tablist__tabs a {
display: inline-block;
flex: 1;
border-radius: remify(4px) remify(4px) 0 0;
}
.c-tablist__tabs a {
text-decoration: none;
padding: remify(8px) remify(20px);
color: primary(night, 100);
display: block;
text-align: center;
white-space: nowrap;
min-width: remify(140px);
background-color: primary(night, 20);
color: primary(night, 100);
border-radius: remify(12px);
@include min-screen (bp(tablet)) {
padding: remify(8px) remify(40px);
min-width: remify(220px);
}
.c-icon {
vertical-align: bottom;
color: currentColor;
}
svg {
* {
fill: currentColor;
}
}
}
.c-tablist__tabs [aria-current="true"] {
color: #fff;
background-color: primary(night, 80);
}
.c-tablist__section {
padding: remify(16px);
@include min-screen(bp(tablet-p)) {
padding: 0;
}
.disclaimer {
text-align: center;
font-size: 75%;
margin-top: remify(20px);
}
.c-tablist__empty-message {
color: primary(night, 100);
font-weight: fw(regular);
margin: remify(80px) 0;
font-size: 150%;
text-align: center;
}
}
.c-tablist__section-header {
padding: remify(16px);
display: flex;
flex-direction: column;
gap: remify(16px);
@include min-screen(bp(phone-p)) {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.c-tablist__section-title {
@include font-scale(level-3);
color: #fff;
// padding: remify(16px) 0 0 remify(16px);
text-align: left;
}
}
/*------------------------------------*\
Flights-list modifier
\*------------------------------------*/
.c-tablist--flights-list,
.c-tablist--destination {
.c-tablist__section {
position: relative;
@include min-screen(bp(tablet-l)) {
padding: remify(48px);
}
}
}
/*------------------------------------*\
Destination modifier
\*------------------------------------*/
.c-tablist--destination {
margin-top: remify(40px);
}
/*------------------------------------*\
Flights times modifier
\*------------------------------------*/
.c-tablist--flights-times {
.c-tablist__tabs {
z-index: 0; // To prevent the bug of autocomplete that goes under the tabs
width: 100%;
max-width: remify(450px);
@include min-screen(bp(tablet-p)) {
width: 50%;
max-width: initial;
}
}
.c-tablist__section {
padding: remify(16px) 0;
}
// .c-main--arrivals-departures & {
// margin-top: remify(24px);
// }
.c-tablist__tabs a {
font-size: 75%;
@include min-screen(bp(phone-p)) {
font-size: 100%;
}
}
.status {
text-align: center;
margin-bottom: remify(32px);
position: relative;
@include min-screen(bp(tablet)) {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
// display: flex;
// justify-content: space-between;
// align-items: center;
}
}
.status__child {
&.refresh {
display: none;
@include min-screen(bp(tablet)) {
display: block;
}
}
&.is-alone {
margin-left: auto;
}
}
.status__child+.status__child {
margin-top: remify(16px);
@include min-screen(bp(tablet)) {
margin-top: 0;
}
}
.status .days {
display: flex;
align-items: center;
justify-content: center;
// @include min-screen(bp(tablet-p)) {
// position: absolute;
// left: 50%;
// transform: translateX(-50%);
// }
.today {
text-align: center;
color: primary(night, 100);
}
p {
font-size: 150%;
margin: 0 remify(24px);
}
small {
text-transform: uppercase;
}
a {
max-height: remify(24px);
}
svg * {
fill: primary(night, 100);
}
}
.last-update {
text-align: center;
width: 100%;
}
.last-update--mobile {
display: block;
margin-top: remify(24px);
@include min-screen(bp(tablet)) {
display: none;
}
}
.last-update--desktop {
display: none;
@include min-screen(bp(tablet)) {
display: block;
margin-top: remify(8px);
}
}
.c-tablist__time-switcher {
display: none;
position: sticky;
z-index: 200;
bottom: 0;
@include min-screen(bp(tablet)) {
display: block;
}
}
.flight-items {
max-width: remify(800px);
margin-inline: auto;
padding-inline: remify(16px);
}
}
/*------------------------------------*\
Forms modifier
\*------------------------------------*/
.c-tablist--forms {
.c-tablist__sections {
margin-top: 0;
@include min-screen(bp(tablet)) {
display:0 0 remify(48px);
}
// Dichiara un'altezza minima in modo da evitare il reflow della pagina
min-height: remify(96px);
}
.c-tablist__section {
box-shadow: none;
padding: 0;
margin: 0 auto;
outline: none;
max-width: remify(900px);
background-color: primary(night, 100);
border-radius: 0 0 remify(16px) remify(16px);
&~.c-tablist__section {
display: none;
}
// Rende visibile il tab corrente quando XIAO ha terminato il caricamento
&[aria-label]:not([hidden]) {
display: block;
}
}
.c-tablist__section--flights {
@include min-screen( $bp-form-flights ) {
width: 100%;
max-width: remify(1269px);
border-radius: remify(16px);
margin: 0 auto;
}
}
.c-tablist__tabs {
justify-content: space-between;
flex-wrap: nowrap;
border: none;
border-radius: 0;
width: 100%;
max-width: remify(900px);
border-radius: remify(16px) remify(16px) 0 0;
overflow: hidden;
@include min-screen(bp(tablet)) {
justify-content: center;
flex-wrap: nowrap;
}
}
.c-tablist__tabs li {
flex: 0 1 25%;
border-radius: 0;
}
.c-tablist__tabs a,
.c-tablist__tabs [aria-current="true"] {
padding: remify(16px) remify(4px);
background-color: primary(night, 20);
color: primary(night, 120);
display: block;
text-align: center;
border-radius: 0;
width: 100%;
min-width: remify(40px);
@include font-scale(level-1-5);
}
.c-tablist__tabs [aria-current="true"] {
text-decoration: none;
background-color: primary(night, 100);
color: #fff;
}
.c-tablist__tabs li a:hover,
.c-tablist__tabs [aria-current="true"] {
@include max-screen(bp(tablet)) {
background-color: primary(night, 120);
color: primary(sun, 100);
}
}
.c-tablist__tabs a svg {
display: inline-block;
* {
fill: currentColor;
}
}
.c-tablist__tabs span {
display: none;
@include min-screen(bp(tablet)) {
display: inline-block;
}
}
.c-tablist__tabs .mobile-label {
display: block;
@include min-screen(bp(tablet)) {
display: none;
}
}
.c-tablist__section--express {
.c-form__fields {
padding: remify(16px);
}
}
}
/*------------------------------------*\
HOMEPAGE forms modifier
\*------------------------------------*/
// .c-tablist--forms .c-tablist__section--parkings.has-banner:not([hidden]) {}
.c-tablist--forms .c-tablist__section {
.c-form {
padding: remify(16px);
text-align: left;
label {
color: #fff;
}
.c-field__note {
color: #fff;
}
label.is-negative {
color: status(light-negative);
input {
background-color: status(light-negative);
}
.c-field__note {
color: status(light-negative);
}
}
}
.c-banner {
border-radius: 0 0 remify(16px) remify(16px);
}
.c-form .pax-type label {
color: inherit;
}
}
/*------------------------------------*\
Pax-guide modifier
\*------------------------------------*/
.c-tablist--pax-guide {
*:focus {
outline: none;
}
.c-tablist__section {
margin-top: remify(8px);
border-radius: remify(8px);
background-color: primary(night, 120);
color: #fff;
a {
color: currentColor;
}
}
.c-tablist__tabs a,
.c-tablist__tabs [aria-current="true"] {
padding: remify(16px);
background-color: primary(night, 100);
color: #fff;
display: block;
text-align: center;
height: 100%;
border-radius: remify(4px);
background-color: transparent;
box-shadow: none;
font-size: 150%;
font-weight: fw(light);
}
.c-tablist__tabs [aria-current="true"] {
text-decoration: none;
font-weight: fw(semibold);
&:before {
position: absolute;
@include css-triangle("down", 10px, primary(sun, 100));
bottom: remify(-10px);
left: 50%;
transform: translateX(-50%);
@include min-screen(bp(tablet)) {
content: "";
}
}
}
}
/*------------------------------------*\
titolo-borsa modifier
\*------------------------------------*/
.c-tablist.c-tablist--titolo-borsa {
margin: remify(40px) 0;
.c-tablist__tabs {
@include max-screen(bp(phone-p)) {
align-items: flex-end;
}
}
.c-tablist__tabs a {
font-size: 75%;
&[aria-current="true"] {
border-top: remify(5px) solid;
}
&.departures {
border-color: primary(sky, 100);
}
&.arrivals {
border-color: primary(sun, 100);
}
@include min-screen(bp(phone-p)) {
font-size: 100%;
}
@include min-screen(bp(tablet)) {
font-size: 145%;
line-height: 1.42;
}
}
.iframes-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.iframes-container__item {
flex: 0 1 remify(600px);
padding: remify(8px);
}
}
/*------------------------------------*\
YouFirst modifier
\*------------------------------------*/
.c-tablist--youfirst {
@include shadow(higher);
max-width: remify(900px);
margin: 0 auto;
border: 1px solid primary(night, 20);
border-radius: remify(24px);
.c-tablist__sections {
margin-top: 0;
@include min-screen(bp(tablet)) {
display:0 0 remify(48px);
}
// Dichiara un'altezza minima in modo da evitare il reflow della pagina
min-height: remify(96px);
}
.c-tablist__section {
box-shadow: none;
padding: 0;
margin: 0 auto;
outline: none;
border-radius: 0 0 remify(24px) remify(24px);
background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
& ~ .c-tablist__section {
display: none;
}
// Rende visibile il tab corrente quando XIAO ha terminato il caricamento
&[aria-label]:not([hidden]) {
display: block;
}
}
.c-tablist__tabs {
justify-content: space-between;
flex-wrap: nowrap;
border: none;
border-radius: 0;
width: 100%;
border-radius: remify(24px) remify(24px) 0 0;
overflow: hidden;
@include min-screen(bp(tablet)) {
justify-content: center;
flex-wrap: nowrap;
}
}
.c-tablist__tabs li {
flex: 0 1 100%;
border-radius: 0;
}
.c-tablist__tabs a,
.c-tablist__tabs [aria-current="true"] {
padding: remify(16px) remify(4px);
background-color: primary(night, 10);
color: primary(night, 120);
display: block;
text-align: center;
border-radius: 0;
width: 100%;
min-width: remify(40px);
@include font-scale(level-1-5);
.c-tablist__label--desktop { display: none;}
.c-tablist__label--mobile { display: block;}
@include min-screen(bp(tablet)) {
.c-tablist__label--desktop { display: inline-block;}
.c-tablist__label--mobile { display: none;}
}
}
.c-tablist__tabs [aria-current="true"] {
text-decoration: none;
background-color: #fff;
}
.c-tablist__tabs a svg {
display: inline-block;
* {
fill: currentColor;
}
}
.c-tablist__tabs span {
display: none;
@include min-screen(bp(tablet)) {
display: inline-block;
}
}
.c-tablist__section--express {
.c-form__fields {
padding: remify(16px);
}
}
}
.youfirst_tab {
text-align: left;
padding: remify(24px);
@include min-screen(bp(tablet)) {
padding: remify(24px) remify(48px) remify(48px);
}
.youfirst_tab__title {
@include font-scale(level-4);
color: primary(night, 120);
margin-bottom: remify(24px);
}
.youfirst_tab__container {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.youfirst_tab__item {
@include min-screen(bp(tablet-p)) {
flex: 0 1 50%;
}
p {
margin-bottom: remify(8px);
}
ul li{
@include font-scale(level-1-5);
list-style: disc;
margin-bottom: remify(8px);
margin-left: remify(16px);
}
.c-button--submit {
width: 100%;
margin-top: remify(24px);
}
&:first-child {
@include min-screen(bp(tablet)) {
padding-right: remify(48px);
border-right: 1px solid primary(night, 20);
}
}
&.youfirst_tab__item--images {
display: none;
@include min-screen(bp(tablet)) {
padding-left: remify(48px);
display: flex;
justify-content: space-between;
.youfirst_tab__image {
flex: 0 1 46%;
}
}
}
}
.u-chkbx-showmore ~ .u-chkbx-showmore-target { display: block; max-height: 4rem; overflow: hidden; }
.u-chkbx-showmore:checked ~ .u-chkbx-showmore-target { display: block; max-height: 100%; }
.u-chkbx-showmore ~ label .more { display: inline-block; }
.u-chkbx-showmore:checked ~ label .more { display: none; }
.u-chkbx-showmore ~ label .less { display: none; }
.u-chkbx-showmore:checked ~ label .less { display: inline-block; }
.u-chkbx-showmore-label {
color: primary(sky, 120);
@include font-scale(level-2);
display: inline-block;
margin: remify(8px) 0 remify(16px);
&, & span {
text-decoration: underline;
}
&:hover {
cursor: pointer;
}
}
.youfirst_tab__divider {
text-align: center;
padding: remify(8px) 0;
margin: remify(8px) 0;
position: relative;
span {
padding: 0 remify(16px);
background-color: #fff;
display: inline-block;
position: relative;
z-index: 2;
}
&:after {
content: "";
position: absolute;
left: remify(24px);
right: remify(24px);
top: 50%;
transform: translateY(-50%);
border-bottom: 1px solid primary(night, 20);
z-index: 1;
}
}
}
(function($) {
/*
This JS scrolls the page on the anchors in order to avoid the page goes to the top everytime.
*/
var $tabs = $('.c-tablist__tabs a');
$tabs.on( "click", function(e) {
// console.log($(this).text());
// e.preventDefault();
// $('html,body').animate({
// scrollTop: $(this).offset().top - 10
// }, 500);
});
})(jQuery);
No notes defined.