Magician (Compare table)

Same as 2018

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-magician ">

    <div class="c-magician__act o-comparison ">
        <div class="c-magician__card o-comparison__item o-comparison__item--releveant">
            <div class="c-launch c-launch--complex">

                <h3>Andata e ritorno!</h3>

                <h4>Un servizio dedicato a te per viaggiare in tutta serenità</h4>

                <div>
                    <div class="bricks">
                        <div class="bricks__item"> <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic_flight_takeoff_black_24px"></use>
                            </svg>
                            <p> <strong>Inclusi tutti i servizi “In partenza”</strong> Servizio di accoglienza, check-in e dropoff bagaglio in stiva, Fast-track, ingresso Vip…</p>
                        </div>
                        <div class="bricks__item"> <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic_flight_land_black_24px"></use>
                            </svg>
                            <p> <strong>Inclusi tutti i servizi “In arrivo”</strong> Servizio di accoglienza, Trasferimento dal Terminal all’area arrivi, ingresso Vip…</p>
                        </div>
                    </div>
                </div>

                <div class="c-launch__links">

                    <span><strong>Più informazioni:</strong></span>

                    <a href="#">Tariffe per il servizio Youfirst &#8594;</a>
                    <a href="#">Condizioni generali del servizio &#8594;</a>

                </div>

                <a href="" class="c-link c-link--submit">
                    <span>Prenota per <strong>andata + ritorno</strong></span>
                </a>
            </div>
        </div>
        <div class="c-magician__card o-comparison__item ">
            <div class="c-launch c-launch--complex">

                <h3>Sei in partenza?</h3>

                <h4>Un servizio dedicato per semplificare la tua partenza</h4>

                <div>
                    <ul>
                        <li>- <strong>Accoglienza</strong> da parte del nostro personale alla reception della Marconi Business Lounge al 1° piano del Terminal.</li>
                        <li>- <strong>Assistenza nelle procedure di check-in</strong> all’interno della Lounge, con drop-off bagaglio da stiva se presente.</li>
                        <li>- <strong>Servizio di facchinaggio</strong> per il bagaglio da stiva.</li>
                        <li>- Ingresso alla Vip Lounge e <strong>utilizzo della corsia Fast Track</strong> per l'imbarco.</li>
                        <li>- Assistenza ed <strong>imbarco prioritario al Gate</strong>.</li>
                        <li>- Assistenza al controllo dei passaporti (se necessario).</li>
                        <li>- Trasferimento <strong>dal Terminal all'aeromobile</strong> con mezzo riservato (minivan massimo 5 posti).</li>
                    </ul>
                </div>

                <div class="c-launch__links">

                    <span><strong>Più informazioni:</strong></span>

                    <a href="#">Tariffe per il servizio Youfirst &#8594;</a>
                    <a href="#">Condizioni generali del servizio &#8594;</a>

                </div>

                <a href="" class="c-link c-link--submit">
                    <span>Prenota per la <strong>partenza</strong></span>
                </a>
            </div>
        </div>
        <div class="c-magician__card o-comparison__item ">
            <div class="c-launch c-launch--complex">

                <h3>Sei in arrivo?</h3>

                <h4>Un servizio dedicato per semplificare il tuo arrivo</h4>

                <div>
                    <ul>
                        <li>- <strong>Accoglienza</strong> da parte del nostro personale sottobordo dell’aereo.</li>
                        <li>- Trasferimento <strong>dall’aeromobile al Terminal area Arrivi con mezzo riservato</strong> (minivan massimo 5 posti).</li>
                        <li>- <strong>Assistenza al controllo passaporti</strong> e Dogana (se necessario).</li>
                        <li>- <strong>Ingresso alla Vip Lounge</strong> (se richiesto).</li>
                        <li><strong>In più se hai il bagaglio da stiva</strong>:</li>
                        <li>- Riconsegna bagaglio tramite <strong>nastro dedicato</strong> (consegnando al nostro personale sottobordo la ricevuta bagaglio del check-in).</li>
                        <li>- <strong>Servizio facchinaggio</strong> per bagaglio da stiva.</li>
                    </ul>
                </div>

                <div class="c-launch__links">

                    <span><strong>Più informazioni:</strong></span>

                    <a href="#">Tariffe per il servizio Youfirst &#8594;</a>
                    <a href="#">Condizioni generali del servizio &#8594;</a>

                </div>

                <a href="" class="c-link c-link--submit">
                    <span>Prenota per l'<strong>arrivo</strong></span>
                </a>
            </div>
        </div>
    </div>

</div>

<div class="c-dialog js-fr-dialogmodal " id="dialog-youfirst-departure">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-youfirst-departure-title">
        <div role="document">
            <p class="c-dialog__title" id="dialog-youfirst-departure-title" aria-hidden="true">Youfirst per la partenza</p>
            <p class="c-dialog__subtitle">
                La corsia riservata per semplificare la tua partenza.
            </p>

            <ul class="c-list--bulleted">
                <li><strong>Accoglienza</strong> da parte del nostro personale alla reception della Marconi Business Lounge al 1° piano del Terminal.</li>
                <li><strong>Assistenza nelle procedure di check-in</strong> all’interno della Lounge, con drop-off bagaglio da stiva se presente.</li>
                <li><strong>Servizio di facchinaggio</strong> per il bagaglio da stiva.</li>
                <li>Compreso ingresso alla Vip Lounge e <strong>utilizzo della corsia Fast Track</strong> per l’imbarco.</li>
                <li>Assistenza ed <strong>imbarco prioritario al Gate</strong>.</li>
                <li>Assistenza al controllo passaporti (se necessario).</li>
                <li>Trasferimento dal <strong>Terminal all’aeromobile</strong> con mezzo riservato (minivan massimo 5 posti).</li>
            </ul>

            <div class="c-dialog__action">
                <button type="button" class="c-button c-button--submit">

                    Prenota per la partenza

                </button>
            </div>

            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>
<div class="c-dialog js-fr-dialogmodal " id="dialog-youfirst-arrival">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-youfirst-arrival-title">
        <div role="document">
            <p class="c-dialog__title" id="dialog-youfirst-arrival-title" aria-hidden="true">Youfirst per l&#x27;arrivo</p>
            <p class="c-dialog__subtitle">
                La corsia riservata per semplificare il tuo arrivo.
            </p>

            <ul class="c-list--bulleted">
                <li><strong>Accoglienza</strong> da parte del nostro personale sottobordo dell’aereo.</li>
                <li>Trasferimento <strong>dall’aeromobile al Terminal area Arrivi con mezzo riservato</strong> (minivan massimo 5 posti).</li>
                <li><strong>Assistenza al controllo passaporti</strong> e Dogana (se necessario).</li>
                <li>Compreso <strong>ingresso alla Vip Lounge</strong> (se richiesto).</li>
            </ul>
            <br>
            <p><strong>In più se hai il bagaglio da stiva:</strong></p>

            <ul class="c-list--bulleted">
                <li>Riconsegna bagaglio tramite <strong>nastro dedicato</strong> (consegnando al nostro personale sottobordo la ricevuta bagaglio del check-in).</li>
                <li><strong>Servizio facchinaggio</strong> per bagaglio da stiva.</li>
            </ul>

            <div class="c-dialog__action">
                <button type="button" class="c-button c-button--submit">

                    Prenota per l'arrivo

                </button>
            </div>

            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>


        <div class="c-magician {{ modifier }}">

  {{#if title}}
  <div class="c-magician__title">
    {{{title}}}
  </div>
  {{/if}}

  {{#if additional-content}}
  <div class="o-adjacent o-adjacent--centered">
    {{#each additional-content }}
      <div class="o-adjacent__item">
        {{{ render component media merge=true }}}
      </div>  
    {{/each}}
  </div>
  {{/if}}
  
  <div class="c-magician__act o-comparison {{ act-modifier }}">
    {{#each items}}
      <div class="c-magician__card o-comparison__item {{ this.class }}">
        {{ render componentName componentInstance merge=true }}
      </div>
    {{/each}}
  </div>

  {{#if footer-text}}
  <div class="c-magician__footer">
    {{{footer-text}}}
  </div>
  {{/if}}

</div>

{{!-- Refactor this horrible code!!! --}}
{{#if hasNoDialog}}
{{else}}
  {{ render "@dialog--youfirst-departure" }}
  {{ render "@dialog--youfirst-arrival" }}
{{/if}}


        
            
            {
  "items": [
    {
      "class": "o-comparison__item--releveant",
      "componentName": "@launch--complex",
      "componentInstance": {
        "title": "Andata e ritorno!",
        "subtitle": "Un servizio dedicato a te per viaggiare in tutta serenità",
        "body": "<div class=\"bricks\"><div class=\"bricks__item\"> <svg class=\"c-icon c-icon--24\"><use xlink:href=\"#ic_flight_takeoff_black_24px\"></use></svg><p> <strong>Inclusi tutti i servizi “In partenza”</strong> Servizio di accoglienza, check-in e dropoff bagaglio in stiva, Fast-track, ingresso Vip…</p></div><div class=\"bricks__item\"> <svg class=\"c-icon c-icon--24\"><use xlink:href=\"#ic_flight_land_black_24px\"></use></svg><p> <strong>Inclusi tutti i servizi “In arrivo”</strong> Servizio di accoglienza, Trasferimento dal Terminal all’area arrivi, ingresso Vip…</p></div></div>",
        "more-info": {
          "label": "Più informazioni:",
          "link": [
            {
              "url": "#",
              "label": "Tariffe per il servizio Youfirst &#8594;"
            },
            {
              "url": "#",
              "label": "Condizioni generali del servizio &#8594;"
            }
          ]
        },
        "cta": {
          "type": "link",
          "text": "Prenota per <strong>andata + ritorno</strong>",
          "modifier": "c-link--submit"
        }
      }
    },
    {
      "componentName": "@launch--complex",
      "componentInstance": {
        "title": "Sei in partenza?",
        "subtitle": "Un servizio dedicato per semplificare la tua partenza",
        "body": "<ul><li>- <strong>Accoglienza</strong> da parte del nostro personale alla reception della Marconi Business Lounge al 1° piano del Terminal.</li><li>- <strong>Assistenza nelle procedure di check-in</strong> all’interno della Lounge, con drop-off bagaglio da stiva se presente.</li><li>- <strong>Servizio di facchinaggio</strong> per il bagaglio da stiva.</li><li>- Ingresso alla Vip Lounge e <strong>utilizzo della corsia Fast Track</strong> per l'imbarco.</li><li>- Assistenza ed <strong>imbarco prioritario al Gate</strong>.</li><li>- Assistenza al controllo dei passaporti (se necessario).</li><li>- Trasferimento <strong>dal Terminal all'aeromobile</strong> con mezzo riservato (minivan massimo 5 posti).</li></ul>",
        "more-info": {
          "label": "Più informazioni:",
          "link": [
            {
              "url": "#",
              "label": "Tariffe per il servizio Youfirst &#8594;"
            },
            {
              "url": "#",
              "label": "Condizioni generali del servizio &#8594;"
            }
          ]
        },
        "cta": {
          "type": "link",
          "text": "Prenota per la <strong>partenza</strong>",
          "modifier": "c-link--submit"
        }
      }
    },
    {
      "componentName": "@launch--complex",
      "componentInstance": {
        "title": "Sei in arrivo?",
        "subtitle": "Un servizio dedicato per semplificare il tuo arrivo",
        "body": "<ul><li>- <strong>Accoglienza</strong> da parte del nostro personale sottobordo dell’aereo.</li><li>- Trasferimento <strong>dall’aeromobile al Terminal area Arrivi con mezzo riservato</strong> (minivan massimo 5 posti).</li><li>- <strong>Assistenza al controllo passaporti</strong> e Dogana (se necessario).</li><li>- <strong>Ingresso alla Vip Lounge</strong> (se richiesto).</li><li><strong>In più se hai il bagaglio da stiva</strong>:</li><li>- Riconsegna bagaglio tramite <strong>nastro dedicato</strong> (consegnando al nostro personale sottobordo la ricevuta bagaglio del check-in).</li><li>- <strong>Servizio facchinaggio</strong> per bagaglio da stiva.</li></ul>",
        "more-info": {
          "label": "Più informazioni:",
          "link": [
            {
              "url": "#",
              "label": "Tariffe per il servizio Youfirst &#8594;"
            },
            {
              "url": "#",
              "label": "Condizioni generali del servizio &#8594;"
            }
          ]
        },
        "cta": {
          "type": "link",
          "text": "Prenota per l'<strong>arrivo</strong>",
          "modifier": "c-link--submit"
        }
      }
    }
  ]
}

File:

Content:


                                .c-magician {

  main & {
    grid-column: main;
  }

  .c-main--flights-landing & {
    margin-top: remify(24px);
    margin-bottom: remify(32px);
    
    @include min-screen(bp(tablet-l)) {
      margin-top: remify(56px);
      margin-bottom: remify(80px);
    }

  }

  .bricks {
    margin: remify(48px) 0;

    @include min-screen(bp(tablet)) {
      padding: remify(24px);
      border-radius: remify(4px);
      @include shadow(medium);
    }
  }
  
  .bricks__item {

    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: remify(48px);
    position: relative;
    
    &:last-child {
      margin-bottom: 0;
      &:after, &:before {
        display: none;
      }
    }
    
    svg {
      margin-right: remify(16px); 
    }
    
    p {
      margin-bottom: 0;
    }

    p strong {
      display: block;
    }

    &:before {
      content: '';
      position: absolute;
      bottom: remify(-24px);
      border-bottom: remify(1px) solid #ccc;
      width: 100%;
      z-index: 1;
    }
    
    &:after {
      content: '+';
      background-color: #fff;
      position: absolute;
      bottom: remify(-36px);
      z-index: 2;
      padding: 0 remify(16px);
      font-size: remify(18px);
    }
    
  }

  .c-main--home-society & {
    margin-top: remify(40px);
    margin-bottom: remify(40px);
  }
  
}

.c-magician__title,
.c-magician__footer {
  text-align: center;
  color: primary(night, 100);
}

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

  @include min-screen(bp(tablet-l)) {
    margin-bottom: remify(32px);
  }

}

.c-magician__footer {
  @include min-screen(bp(tablet-l)) {
    margin-top: remify(32px);
  }
  
  & p {
    font-size: remify(24px);
  }

}

.c-magician__card {
  @include shadow(medium);
}

  .c-magician__card--phoneHidden {
    @include max-screen(bp(tablet-l)) {
      display: none;
    }  
  }

/*------------------------------------*\
  Only desktop modifier
\*------------------------------------*/

.c-magician__act--phoneHidden {

  @include max-screen(bp(tablet-l)) {
    display: none;
  }

}

/*------------------------------------*\
  Compact modifier
\*------------------------------------*/

.c-magician--compact {

  .c-magician__act {
    width: 100%;
    max-width: remify(680px);
    margin: 0 auto;
  }

}

URL: /components/raw/magician/_magician.scss
Filesystem Path: src/views/03-organisms/magician/_magician.scss
Size: 2.3 KB

Handle: @magician
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/magician/magician.hbs
References (2): @dialog--youfirst-departure, @dialog--youfirst-arrival
Referenced by (1): @youfirst

No notes defined.