Aeroporto di Bologna - Design System

Content expo: Parking 

<div class="c-content-expo " grid="grid">

    <div class="c-content-expo__item c-content-expo__item--main" grid="7@md first@md">

        <div class="js-productPop">

            <div class="c-product__fold">
                <div class="c-media o-media c-media--vertically-centered">
                    <img class="c-media__figure o-media__figure" src="../../images/weekend-rate.jpg" alt="Parcheggia in aeroporto. Tariffa weekend 19€" height="" width="80">
                    <div class="c-media__body o-media__body">
                        <strong class='u-color-night-100'>Parcheggia in aeroporto.</strong>
                        <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="dialog-weekend-fare">Tariffa weekend 19€</button>
                    </div>
                </div>
            </div>

            <div class="c-product c-product--p2 c-product--pop">

                <div class="c-product__info">

                    <div class="c-product__type">
                        <img src="/images/svgs/p2.svg" alt="Parcheggio P2">
                        <div class="c-product__park-infos">

                        </div>
                    </div>

                    <div class="c-product__features">
                        <ul class="c-icon-list" aria-label="Caratteristiche parcheggio P2">
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-covered-parking-black-24px"></use>
                                </svg> <span class="c-icon-list__text">Coperto</span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-accessible-black-24px"></use>
                                </svg> <span class="c-icon-list__text">Posti riservati</span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic_place_black_24px"></use>
                                </svg> <span class="c-icon-list__text">Fronte aerostazione</span>
                            </li>
                            <li class="c-icon-list__item ">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic_directions_walk_black_24px"></use>
                                </svg> <span class="c-icon-list__text">1 min. a piedi</span>
                            </li>
                        </ul>
                    </div>
                    <div class="c-product__focus">
                        <img src="/images/weekend-rate.jpg" class="js-fr-dialogmodal-open" aria-controls="dialog-weekend-fare" alt="Dal venerdi alla domenica, tariffa weekend €19">
                    </div>
                </div>

                <div class="c-product__fare">
                    <div class="c-product__price">
                        <div class="fare-text">
                            L'acquisto online è possibile solo <strong>fino a 24 ore dall'inizio della sosta</strong>
                        </div>
                        <button type="submit" class="c-button c-button--submit js-fr-dialogmodal-open" aria-controls="dialog-parking-form">

                            Prenota e acquista

                        </button>
                    </div>
                </div>

            </div>

            <div class="c-product__pop-info">
                <div class="c-content-expo c-product--p2 c-product--pop" grid="grid">

                </div>
            </div>

        </div>

        <div class="c-dialog c-dialog--save-and-book js-fr-dialogmodal " id="dialog-weekend-fare">
            <div class="c-dialog__inner no-padding js-fr-dialogmodal-modal" aria-labelledby="dialog-weekend-fare-title">
                <div role="document">

                    <img src="../../images/svgs/weekend-fare.svg" class="c-dialog__img" alt="Tariffa weekend" aria-hidden="true">

                    <p class="c-dialog__title" id="dialog-weekend-fare-title">Parcheggia in Aeroporto e risparima con la Tariffa Weekend!</p>

                    <p class="c-dialog__text c-dialog__text--centered">
                        Valida tutto l'anno, nei parcheggi P1, P2, P3, dell'Aeroporto G. Marconi di Bologna, escluso il mese di agosto, per soste che hanno inizio dal venerdì e terminano non oltre le ore 24.00 di domenica. In caso di soste superiori, per ogni giorno supplementare si applica la tariffa standard.
                    </p>

                    <p class="c-dialog__text c-dialog__text--centered">
                        Per soste che includono due o più fine settimana consecutivi, viene applicata solo con riferimento al primo weekend. Non cumulabile con altre convenzioni/promozioni.
                    </p>

                    <p class="c-dialog__text c-dialog__text--centered c-dialog__text--small">
                        Si ricorda che, per avvalersi della Tariffa Weekend, al momento dell'ingresso al parcheggio prenotato, è necessario posizionare il QR Code sotto il lettore della colonnina d’ingresso e non rimuoverlo fino all’emissione automatica del biglietto. In assenza della prenotazione è necessario recarsi al Presidio parcheggi (situato alla base del parcheggio Multipiano di fronte all'aerostazione), oppure inserire nelle casse automatiche il buono da richiedere anticipatamente al Presidio il giorno di entrata nel parcheggio.
                    </p>

                    <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 c-dialog--parking-map js-fr-dialogmodal " id="">
            <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="-">
                <div role="document">
                    <p class="c-dialog__title" id="-"></p>

                    <div class="c-dialog__map">
                        <img src="https://maps.googleapis.com/maps/api/staticmap?center=&zoom=&size=x&markers=&key=AIzaSyABU478CeE-kWTe9e86eDm9n4ANtibBd3M" width="100%" alt="">

                        <div class="js-dialog-map" tabindex="-1">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1422.1440324056696!2d11.291909658337978!3d44.52973399477526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDTCsDMxJzQ3LjAiTiAxMcKwMTcnMzQuOCJF!5e0!3m2!1sit!2sit!4v1518606203435" style="border:0" allowfullscreen></iframe>
                        </div>

                    </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="u-mb-space-24 u-mt-space-16s">
            <iframe class="u-radius-12" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1422.1440324056696!2d11.291909658337978!3d44.52973399477526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDTCsDMxJzQ3LjAiTiAxMcKwMTcnMzQuOCJF!5e0!3m2!1sit!2sit!4v1518606203435" style="border:0" allowfullscreen=""></iframe>
        </div>

        <div class="u-mb-space-24">
            <iframe src="https://www.youtube.com/embed/d7s99Vgaues" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0"></iframe>
        </div>

        <div class="c-table_cnt c-table_cnt--noSlide">
            <table class="o-table c-table">
                <caption class="medium">Per veicoli fino a 1,85 metri di altezza</caption>
                <thead>
                    <tr>
                        <th scope="col">Permanenza</th>
                        <th scope="col">Tariffa in vigore</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-label="Permanenza"><strong>1° giorno</strong></td>
                        <td data-label="Tariffa">
                            <ul class="bordered">
                                <li><strong>€ 0,00</strong> gratuito 0-10 min.</li>
                                <li><strong>€ 3,50</strong> fino a 1 ora</li>
                                <li><strong>€ 7,00</strong> fino a 2 ore</li>
                                <li><strong>€ 10,50</strong> fino a 3 ore</li>
                                <li><strong>€ 14,00</strong> fino a 24 ore</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td data-label="Permanenza"><strong>Dal 2° giorno e giorni successivi</strong></td>
                        <td data-label="Tariffa">
                            <ul>
                                <li><strong>€ 14,00</strong> al giorno</li>
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="c-table_cnt c-table_cnt--noSlide">
            <table class="o-table c-table">
                <caption class="medium">Per veicoli oltre 1,85 metri di altezza</caption>
                <thead>
                    <tr>
                        <th scope="col">Permanenza</th>
                        <th scope="col">Tariffa in vigore</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-label="Permanenza"><strong>1° giorno</strong></td>
                        <td data-label="Tariffa">
                            <ul class="bordered">
                                <li><strong>€ 10,00</strong> / ora o frazione di ore successive</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td data-label="Permanenza"><strong>Dal 2° giorno e giorni successivi</strong></td>
                        <td data-label="Tariffa">
                            <ul>
                                <li><strong>€ 14,00</strong> al giorno</li>
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

    <div class="c-content-expo__item c-content-expo__item--side" grid="4@md offset-9@md">
        <h4>Consigliato</h4>
        <ul>
            <li><strong>Fino a 4 ore</strong> - Per chi ti accompagna o ti viene a prendere</li>
            <li><strong>Fino a 4 giorni</strong> - Per il tuo viaggio di lavoro, week-end</li>
            <li><strong>5 giorni e oltre</strong> - Per la tua vacanza</li>
        </ul>

        <h4>Altre tariffe</h4>
        <p>
            <strong>Tariffa Weekend.</strong>
            Valida tutto l’anno, nel parcheggio P2 Business dell’Aeroporto G. Marconi di Bologna, per soste che hanno inizio dal venerdì e terminano non oltre le ore 24.00 di domenica.
        </p>
        <p><strong>Sconto 30% per le city-car</strong> (fino a 2,5m di lunghezza) che sostano negli spazi riservati.</p>
        <p><strong>€ 5 al giorno /frazione di giorno per le moto</strong> che sostano negli spazi riservati. Per le modalità di accesso rivolgersi agli addetti.</p>
        <p><strong>Abbonamenti</strong> periodici e tessere a scalare d'importo.</p>

        <h4>Servizi</h4>
        <img src="../../images/kiss-fly-compact.jpg" alt="Kiss & fly" width="90">
        <img src="../../images/elettra.png" alt="Elettra" width="90">

        <h4>Documenti</h4>
        <div class="docs">
            <div class="c-media o-media ">
                <img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Mappa parcheggi" height="" width="32">
                <div class="c-media__body o-media__body">
                    <a href="#"><strong>Mappa parcheggi</strong></a><br>PDF, 577 kb
                </div>
            </div>
            <div class="c-media o-media ">
                <img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Regolamento" height="" width="32">
                <div class="c-media__body o-media__body">
                    <a href="#"><strong>Regolamento</strong></a><br>PDF, 645 kb
                </div>
            </div>
        </div>

    </div>

</div>
 
<div class="c-content-expo {{ modifier }}" grid="grid">
  
  {{!-- partial-block defined page by page --}}
  {{#> @partial-block }}
    {{!-- Boss --}}
    <div class="c-content-expo__item c-content-expo__item--main" grid="7@md first@md">

      {{> @product--pop pop-park-item }}

      <div class="u-mb-space-24 u-mt-space-16s">
        <iframe class="u-radius-12" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1422.1440324056696!2d11.291909658337978!3d44.52973399477526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDTCsDMxJzQ3LjAiTiAxMcKwMTcnMzQuOCJF!5e0!3m2!1sit!2sit!4v1518606203435" style="border:0" allowfullscreen=""></iframe>
      </div>

      <div class="u-mb-space-24">
        <iframe src="https://www.youtube.com/embed/d7s99Vgaues" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0"></iframe>
      </div>
      
      <div class="c-table_cnt c-table_cnt--noSlide">
        <table class="o-table c-table">
          <caption class="medium">Per veicoli fino a 1,85 metri di altezza</caption>
          <thead>
            <tr>
              <th scope="col">Permanenza</th>
              <th scope="col">Tariffa in vigore</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="Permanenza"><strong>1° giorno</strong></td>
              <td data-label="Tariffa">
                <ul class="bordered">
                  <li><strong>€ 0,00</strong> gratuito 0-10 min.</li>
                  <li><strong>€ 3,50</strong> fino a 1 ora</li>
                  <li><strong>€ 7,00</strong> fino a 2 ore</li>
                  <li><strong>€ 10,50</strong> fino a 3 ore</li>
                  <li><strong>€ 14,00</strong> fino a 24 ore</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td data-label="Permanenza"><strong>Dal 2° giorno e giorni successivi</strong></td>
              <td data-label="Tariffa">
                <ul>
                  <li><strong>€ 14,00</strong> al giorno</li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="c-table_cnt c-table_cnt--noSlide">
        <table class="o-table c-table">
          <caption class="medium">Per veicoli oltre 1,85 metri di altezza</caption>
          <thead>
            <tr>
              <th scope="col">Permanenza</th>
              <th scope="col">Tariffa in vigore</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="Permanenza"><strong>1° giorno</strong></td>
              <td data-label="Tariffa">
                <ul class="bordered">
                  <li><strong>€ 10,00</strong> / ora o frazione di ore successive</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td data-label="Permanenza"><strong>Dal 2° giorno e giorni successivi</strong></td>
              <td data-label="Tariffa">
                <ul>
                  <li><strong>€ 14,00</strong> al giorno</li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

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




    <div class="c-content-expo__item c-content-expo__item--side" grid="4@md offset-9@md">
      <h4>Consigliato</h4>
      <ul>
        <li><strong>Fino a 4 ore</strong> - Per chi ti accompagna o ti viene a prendere</li>
        <li><strong>Fino a 4 giorni</strong> - Per il tuo viaggio di lavoro, week-end</li>
        <li><strong>5 giorni e oltre</strong> - Per la tua vacanza</li>
      </ul>

      <h4>Altre tariffe</h4>
      <p>
        <strong>Tariffa Weekend.</strong>
        Valida tutto l’anno, nel parcheggio P2 Business dell’Aeroporto G. Marconi di Bologna, per soste che hanno inizio dal venerdì e terminano non oltre le ore 24.00 di domenica.
      </p>
      <p><strong>Sconto 30% per le city-car</strong> (fino a 2,5m di lunghezza) che sostano negli spazi riservati.</p>
      <p><strong>€ 5 al giorno /frazione di giorno per le moto</strong> che sostano negli spazi riservati. Per le modalità di accesso rivolgersi agli addetti.</p>
      <p><strong>Abbonamenti</strong> periodici e tessere a scalare d'importo.</p>

      <h4>Servizi</h4>
      <img src="{{ path '/images/kiss-fly-compact.jpg' }}" alt="Kiss & fly" width="90">
      {{!-- <img src="{{ path '/images/svgs/telepass.svg' }}" alt="Telepass" width="90"> --}}
      <img src="{{ path '/images/elettra.png' }}" alt="Elettra" width="90">

      <h4>Documenti</h4>
      <div class="docs">
        {{> @media pdf-map }}
        {{> @media pdf-rules }}
      </div>

    </div>
  {{/ @partial-block }}
  {{!-- end partial-block --}}

</div>
 
{
  "pop-park-item": {
    "modifier": "c-product--p2 c-product--pop",
    "parking-type-name": "Parcheggio P2",
    "parking-type-img": "/images/svgs/p2.svg",
    "fold": {
      "weekend-promo": {
        "modifier": "c-media--vertically-centered",
        "img-src": "/images/weekend-rate.jpg",
        "img-alt": "Parcheggia in aeroporto. Tariffa weekend 19€",
        "img-width": "80",
        "body": "<strong class='u-color-night-100'>Parcheggia in aeroporto.</strong>",
        "dialog-toggler": "Tariffa weekend 19€",
        "dialog-controller": "dialog-weekend-fare"
      }
    },
    "maplocation": "Parcheggio+P2,+40132+Bologna+BO",
    "mapzoom": "16",
    "mapwidth": "180",
    "mapheight": "145",
    "map-alt-img": "Mappa p1-p2",
    "park-item-features": {
      "aria-label": "Caratteristiche parcheggio P2",
      "items": [
        {
          "icon": "ic-covered-parking-black-24px",
          "text": "Coperto"
        },
        {
          "icon": "ic-accessible-black-24px",
          "text": "Posti riservati"
        },
        {
          "icon": "ic_place_black_24px",
          "text": "Fronte aerostazione"
        },
        {
          "icon": "ic_directions_walk_black_24px",
          "text": "1 min. a piedi"
        }
      ]
    },
    "focus-body": "<img src=\"/images/weekend-rate.jpg\" class=\"js-fr-dialogmodal-open\" aria-controls=\"dialog-weekend-fare\" alt=\"Dal venerdi alla domenica, tariffa weekend €19\" >",
    "lookOnMapDesk": {
      "type": "button",
      "text": "Guarda in mappa",
      "modifier": "c-button--as-link mapDesk js-fr-dialogmodal-open",
      "opens-dialog": "dialog-p1-p2",
      "aria-label": "Apri la modale per consultare la mappa del parcheggio"
    },
    "weekend-dialog": {
      "id": "dialog-weekend-fare"
    },
    "fare-text": "L'acquisto online è possibile solo <strong>fino a 24 ore dall'inizio della sosta</strong>",
    "button": {
      "type": "submit",
      "modifier": "c-button--submit js-fr-dialogmodal-open",
      "text": "Prenota e acquista",
      "opens-dialog": "dialog-parking-form"
    }
  },
  "pdf-map": {
    "img-src": "/images/svgs/pdf.svg",
    "img-alt": "Mappa parcheggi",
    "img-width": "32",
    "body": "<a href=\"#\"><strong>Mappa parcheggi</strong></a><br>PDF, 577 kb"
  },
  "pdf-rules": {
    "img-src": "/images/svgs/pdf.svg",
    "img-alt": "Regolamento",
    "img-width": "32",
    "body": "<a href=\"#\"><strong>Regolamento</strong></a><br>PDF, 645 kb"
  }
}
  • Content: 
    .c-content-expo {
  background-color: #fff;
  text-align: left;
  color: primary(night, 100);

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

  .c-tablist--destination & {
    background-color: transparent;
  }

  .c-icon {
    fill: currentColor;
    vertical-align: middle;
    margin-right: remify(4px);
  }

}

.c-content-expo__item {
  padding: remify(16px);

  @include min-screen(bp(tablet)) {
    padding: remify(40px);
  }

  .c-dialog &.c-content-expo__item--main {
    padding-left: 0;
  }
  .c-dialog &.c-content-expo__item--side {
    padding-right: 0;
  }

  .c-tablist--destination & {
    padding: remify(16px) 0;
    @include min-screen(bp(tablet)) {
      padding: 0;
    }
  }

  h2 {
    margin-bottom: remify(16px);
    color: primary(night, 100);
    @include font-scale(level-4);
  }

  h4 {
    @include font-scale(level-3);
    font-weight: fw(bold);
    color: primary(night, 100);
    margin-bottom: remify(12px);
    border-top: remify(1px) solid #ccc;
    margin-top: remify(24px);
    padding-top: remify(24px);

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

    &:first-child {
      border: none;
      margin-top: 0;
      padding-top: 0;
    }
  }

  h4.raw {
    font-size: 125%;
    font-weight: fw(regular);
    text-transform: initial;
    border: none;
  }

  p {
    margin-bottom: remify(16px);
    color: currentColor;
  }

  p.wrapped-styled {
    background-color: #fff;
    padding: remify(16px);
    // @include shadow(medium);
    border-radius: remify(4px);
    margin-bottom: 0;
    margin-top: remify(16px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .docs {
    display: flex;
    flex-wrap: wrap;
    & > * {
      flex: 1 0 remify(200px);
    }
  }

  p + a {
    margin-top: remify(24px);
  }
  
  img {
      margin-right: 1rem;
      margin-bottom: 1rem;
  }
}

.c-content-expo__card {
  @include shadow(high);
  border-radius: remify(24px);
  padding: remify(16px);

  @include min-screen(bp(tablet)) {
    padding: remify(24px);
  }

  .title {
    @include font-scale(level-4);
    font-weight: fw(bold);
    color: primary(night, 100);
    margin-bottom: remify(24px);
  }

  .row {
    display: flex;
    justify-content: space-between;
  }

  .row + .row {
    border-top: remify(1px) solid primary(night, 10);
    margin-top: remify(16px);
    padding-top: remify(16px);
  }

}

.c-content-expo__footer {
  padding-top: remify(24px);


  .c-button {
    align-self: flex-start;
    margin-bottom: remify(32px);

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

  @include min-screen(bp(tablet)) {
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
  }
}

.c-content-expo__media {

}



.c-content-expo__listitem {
  background-color: secondary(soft, 100);
  border-radius: remify(16px);
  margin-bottom: remify(16px);
  padding: remify(16px);
}

.c-content-expo__today {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  &.is-last {
    justify-content: flex-end;
  }

  .icon--flight .c-icon {
    fill: primary(night, 100);
  }

  .c-content-expo__today-info {
    color: secondary(text, 100);
    margin-left: remify(8px);
  }

  .c-content-expo__weather-assets {
    img {
      display: block;
      margin: 0;
    }
  }

}

// .c-content-expo__item--boss {
//   @include min-screen(bp(tablet)) {
//     flex-basis: 60%;
//   }
// }

// .c-content-expo__item--minion {
//   @include min-screen(bp(tablet)) {
//     width: 40%;
//     flex-basis: 40%;
//     padding-left: remify(8px);
//   }

//   .c-tablist--destination & {
//     @include min-screen(bp(tablet)) {
//       padding-left: remify(40px);
//     }
//   }

//   a {
//     display: block;
//   }

// }

.c-content-expo__item--side {
  a {
    display: block;
  }

  p, ul {
    color: secondary(text, 100);
  }
}

/*------------------------------------*\
  Half modifier
\*------------------------------------*/

.c-content-expo--half {

  .c-content-expo__item--boss,
  .c-content-expo__item--minion {
    @include min-screen(bp(tablet)) {
      flex-basis: 50%;
    }
  }
}

/*------------------------------------*
  Spaceless modifier
*------------------------------------*/
.c-content-expo--spaceless {

  .c-content-expo__item {
    padding: 0;
  }
  
}
  • URL: /components/raw/content-expo/_content-expo.scss
  • Filesystem Path: src/views/02-molecules/content-expo/_content-expo.scss
  • Size: 4.4 KB

No notes defined.