Aeroporto di Bologna - Design System

Deck 

<div class="c-deck ">
    <img class="c-deck__logo" src="/images/svgs/mbl.svg" alt="MBL logo" aria-hidden="true">
    <h2>Scopri come accedere alla Vip Lounge</h2>

    <ul class="c-deck__summary">
        <li>
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic-sport-equipment"></use>
            </svg> <a href="#buy-entrance" aria-label="Scopri i servizi">Scopri i servizi</a>
        </li>
        <li>
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic-work-out"></use>
            </svg> <a href="#accredited-card" aria-label="Scopri i programmi di allenamento">Scopri i programmi di allenamento</a>
        </li>
        <li>
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic-schedule-24px"></use>
            </svg> <a href="#youfirst" aria-label="Come e quando accedere">Come e quando accedere</a>
        </li>
    </ul>

    <div class="c-deck__card c-deck__card--first">
        <section class="c-carousel c-carousel--gallery" aria-hidden="true">

            <div class="jsInstance owl-carousel">
                <img src="https://picsum.photos/560/360" class="" alt="">
                <img src="https://picsum.photos/560/360" class="" alt="">
                <img src="https://picsum.photos/560/360" class="" alt="">
                <img src="https://picsum.photos/560/360" class="" alt="">
            </div>

        </section>
    </div>

    <div class="c-deck__cards-croupier" id="buy-entrance">
        <div class="c-deck__card c-deck__card--second">
            <h4>Accedi alla Vip Lounge acquistando il tuo ingresso</h4>
            <p>I viaggiatori che non possiedono tessere accreditate, posso ottenere l’ingresso Vip Lounge:</p>
            <ul>
                <li>- acquistandolo <strong>online</strong>. <a href="#">Prenota ora</a></li>
                <li>- prenotandolo da telefono <strong>Tel. 051 6479616</strong></li>
                <li>- richiedendolo <strong>direttamente in Vip Lounge</strong> all’arrivo in Aeroporto. <a href="#" aria-label="Posizione Vip Lounge">Guarda dove si trova</a></li>
            </ul>
            <p></p>
            <p>Ogni ingresso è valido per una singola persona.</p>
            <a href="#" class="c-link c-link--primary">
                <span>Prenota ora</span>
                <svg class="svg-24">
                    <use xlink:href="#ic_chevron_right_black_24px"></use>
                </svg></a>
        </div>

        <div class="c-deck__card c-deck__card--third" id="accredited-card">
            <h4>Accedi alla Vip Lounge con la tua tessera accreditata o con la Compagnia Aerea con cui voli</h4>
            <p>
                I viaggiatori indicati dalle singole Compagnie Aeree o in possesso di tessere accreditate potranno accedere alla Vip Lounge senza costi. <strong>Chiedi maggiori informazioni alla Compagnia Aerea con cui volerai oppure al nostro staff che troverai all'ingresso in Vip Lounge.</strong>
            </p>
            <p><strong>Non hai nessuna tessera accreditata?</strong></p>
            <a href="#" aria-label="Prenota ora il tuo ingresso">Prenota ora il tuo ingresso</a>

        </div>

    </div>

</div>
 
<div class="c-deck {{ modifier }}">
  <img class="c-deck__logo" src="{{ logo-src }}" alt="{{ logo-alt }}" aria-hidden="true">
  <h2>{{ h2 }}</h2>

  <ul class="c-deck__summary">
    {{#each summary }}
    <li>
      {{> @icon symbol=this.symbol class="c-icon c-icon--24" }}
      <a href="{{ this.url }}" aria-label="{{ this.text }}">{{ this.text }}</a>
    </li>
    {{/each}}
  </ul>
 
  
  {{!-- <div class="c-deck__cards"> --}}
    
    <div class="c-deck__card c-deck__card--first">
      {{> @carousel--gallery gallery }}
    </div>

    <div class="c-deck__cards-croupier" id="buy-entrance">
      <div class="c-deck__card c-deck__card--second">
        <h4>Accedi alla Vip Lounge acquistando il tuo ingresso</h4>
        <p>I viaggiatori che non possiedono tessere accreditate, posso ottenere l’ingresso Vip Lounge:</p>
        <ul>
          <li>- acquistandolo <strong>online</strong>. <a href="#">Prenota ora</a></li>
          <li>- prenotandolo da telefono <strong>Tel. 051 6479616</strong></li>
          <li>- richiedendolo <strong>direttamente in Vip Lounge</strong> all’arrivo in Aeroporto. <a href="#" aria-label="Posizione Vip Lounge">Guarda dove si trova</a></li>
        </ul>
        <p></p>
        <p>Ogni ingresso è valido per una singola persona.</p>
        {{> @link--primary text="Prenota ora" url="#" svg="true" modifier="c-link--primary" }}
      </div>

      <div class="c-deck__card c-deck__card--third" id="accredited-card">
        <h4>Accedi alla Vip Lounge con la tua tessera accreditata o con la Compagnia Aerea con cui voli</h4>
        <p>
          I viaggiatori indicati dalle singole Compagnie Aeree o in possesso di tessere accreditate potranno accedere alla Vip Lounge senza costi. <strong>Chiedi maggiori informazioni alla Compagnia Aerea con cui volerai oppure al nostro staff che troverai all'ingresso in Vip Lounge.</strong>
        </p>
        <p><strong>Non hai nessuna tessera accreditata?</strong></p>
        <a href="#" aria-label="Prenota ora il tuo ingresso">Prenota ora il tuo ingresso</a>
        
      </div>

    </div>

    {{!-- <div class="c-deck__card c-deck__card--fourth c-deck__card--tanned" id="youfirst">
      <h4>Accedi con Youfirst, il servizio vip per viaggiare in tutta serenità!</h4>
      <p>Risparmia tempo senza rinunciare al comfort.</p>
      <ul>
        <li>+ Accoglienza dedicata  e transfer da/per l’aereo</li>
        <li>+ Fast track, check-in e drop-off bagaglio in stiva</li>
        <li>+ Ingresso Vip Lounge incluso e molto altro…</li>
      </ul>
      {{> @link--primary text="Scopri di più" url="#" svg="true" modifier="c-link--primary" }}
    </div> --}}

  {{!-- </div> --}}

</div>
 
{
  "h2": "Scopri come accedere alla Vip Lounge",
  "logo-src": "/images/svgs/mbl.svg",
  "logo-alt": "MBL logo",
  "summary": [
    {
      "url": "#buy-entrance",
      "text": "Scopri i servizi",
      "symbol": "ic-sport-equipment"
    },
    {
      "url": "#accredited-card",
      "text": "Scopri i programmi di allenamento",
      "symbol": "ic-work-out"
    },
    {
      "url": "#youfirst",
      "text": "Come e quando accedere",
      "symbol": "ic-schedule-24px"
    }
  ],
  "gallery": {
    "modifier": "c-carousel--gallery",
    "images": [
      {
        "img-path": "https://picsum.photos/560/360"
      },
      {
        "img-path": "https://picsum.photos/560/360"
      },
      {
        "img-path": "https://picsum.photos/560/360"
      },
      {
        "img-path": "https://picsum.photos/560/360"
      }
    ]
  }
}
  • Content: 
    $card-maxW: 32.5%;

.c-deck {

  main & {
    grid-column: main;
    margin-top: remify(48px);
  }

  h2 {
    color: primary(night, 100);
    font-size: 125%;
    line-height: 1.4;
    margin-bottom: remify(32px);
    text-align: center;

    @include min-screen(bp(tablet)) {
      font-size: 200%;
      line-height: 1.25;
    }

  }

	h3 {
    line-height: 1.4;
    margin-bottom: remify(20px);
    text-align: center;
  }

	h2 + h3 {
    margin-top: remify(-20px);
  }
	
}

.c-deck__logo {
  display: block;
  margin: 0 auto remify(32px);
  width: remify(180px);

  @include min-screen(bp(tablet)) {
    width: remify(220px);
  }
  
}

.c-deck__summary {
  text-align: center;
  margin-bottom: remify(24px);

  li {
    margin-bottom: remify(16px);
  }

  svg {
    vertical-align: middle;
    margin-right: remify(8px);
    * {
      fill: primary(sky, 100);;
    }
  }

  @include min-screen(bp(tablet-p)) {
    display: none;
  }
}

.c-deck__card {
  margin-bottom: remify(16px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: remify(4px);
  position: relative;
  background-color: #fff;
  padding: remify(24px);
  max-width: remify(640px);
  @include shadow(medium);

  @include min-screen(bp(tablet-p)) {
    max-width: $card-maxW;
  }

  h4 {
    font-size: 125%;
    line-height: 1.4;
    font-weight: fw(bold);
    color: primary(night, 120);
    margin-bottom: remify(24px);
  }

  p {
    display: block;
    margin-bottom: remify(16px);
    color: #3e4043;

    &:last-of-type {
      margin-bottom: 0;
    }

  }

}

.c-deck__cards-croupier {
  display: flex;
  flex-direction: column;
  position: relative;

  @include min-screen(bp(tablet-p)) {
    flex-direction: row;
    margin-top: remify(-300px);
    align-items: flex-start;
  }

  @include min-screen( remify(1920px) ) {
    margin-top: remify(-300px);
  }

}

  .c-deck__card--first {
    max-width: remify(560px);
    z-index: 1;
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;

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

  }

  .c-deck__card--second,
  .c-deck__card--third,
  .c-deck__card--fourth {
    z-index: 2;
  }

  .c-deck__card--second {
    order: 2;

    @include min-screen(bp(tablet-p)) {
      order: 4;
      margin-left: auto;
      margin-right: initial;
    }

  }

  .c-deck__card--third {
    order: 3;

    @include min-screen(bp(tablet-p)) {
      order: 2;
      margin-right: auto;
      margin-left: initial;
    }

    a {
      display: block;
    }
  }

  .c-deck__card--fourth {
    order: 4;

    @include min-screen(bp(tablet-p)) {
      order: 3;
      margin-top: 7.8vw;
    }

    @include min-screen( remify(1920px) ) {
      margin-top: remify(150px);
    }

  }

  .c-deck__card--tanned {
    background-color: primary(night, 100);
    color: #fff;
    
    h4, p {
      color: currentColor;
    }

  }

  
  /*----------  flex container  ----------*/
  
  .c-deck__cards--flex {
    display: flex;
    flex-wrap: wrap;
    .c-deck__card {
      max-width: initial;
      
      @include min-screen (bp(tablet)) {
        max-width: $card-maxW;
      }
    }

    

  }
  • URL: /components/raw/deck/_deck.scss
  • Filesystem Path: src/views/03-organisms/deck/_deck.scss
  • Size: 3.2 KB

No notes defined.