Aeroporto di Bologna - Design System

Content expo: Destination 

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

    <div class="c-content-expo__item c-content-expo__item--side" grid="4@md offset-9@md">

        <div class="c-content-expo__listitem ">
            <div class="o-flexgrid-inline o-flexgrid--space-between ">
                <div class="c-content-expo__today">
                    <div class="icon icon--flight"><svg class="c-icon c-icon--48">
                            <use xlink:href="#ic_flight_takeoff_black_24px"></use>
                        </svg></div>
                    <div class="c-content-expo__today-info">
                        <div>45 min</div>
                        <strong class="u-typo-level-1-5">Durata volo</strong>
                    </div>
                </div>
                <div class="c-content-expo__today is-last">
                    <div class="c-content-expo__weather-assets">
                        <img src="../../images/svgs/weather-clouds.svg" alt="Il meteo di oggi è nuvoloso" />
                        <img src="../../images/logo-epson-meteo.png" alt="Centro Epson Meteo" width="44" />
                    </div>
                    <div class="c-content-expo__today-info">
                        <div>12°C / 24°C</div>
                        <strong class="u-typo-level-1-5">Oggi, nuvoloso</strong>
                    </div>
                </div>
            </div>
        </div>

        <p class="u-typo-level-4 u-color-night-100">Aeroporti serviti da Bologna</p>

        <div class="">
            <div class="c-content-expo__listitem ">
                <div class="o-flexgrid-inline o-flexgrid--space-between ">
                    <strong>Elba EBA</strong> <a href="#">www.aia.gr</a>
                </div>
            </div>
            <div class="c-content-expo__listitem">
                <div class="c-trait ">

                    <div class="c-trait__el livery">
                        <img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
                    </div>

                    <div class="c-trait__el company">
                        <p class="label">Company</p>
                        <p class="txt"><strong>Ryanair</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Linea/Charter</p>
                        <p class="txt"><strong>Linea</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Numero volo</p>
                        <p class="txt"><strong>SLD 504</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Partenza</p>
                        <p class="txt"><strong>14:40</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Arrivo</p>
                        <p class="txt"><strong>15:40</strong></p>
                    </div>

                    <div class="c-trait__el new">
                    </div>

                </div>
            </div>
            <div class="c-content-expo__listitem">
                <div class="c-trait ">

                    <div class="c-trait__el livery">
                        <img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
                    </div>

                    <div class="c-trait__el company">
                        <p class="label">Company</p>
                        <p class="txt"><strong>Ryanair</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Linea/Charter</p>
                        <p class="txt"><strong>Linea</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Numero volo</p>
                        <p class="txt"><strong>SLD 504</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Partenza</p>
                        <p class="txt"><strong>14:40</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Arrivo</p>
                        <p class="txt"><strong>15:40</strong></p>
                    </div>

                    <div class="c-trait__el new">
                    </div>

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

        <div class="">
            <div class="c-content-expo__listitem ">
                <div class="o-flexgrid-inline o-flexgrid--space-between ">
                    <strong>Atene ATL</strong> <a href="#">www.aia.gr</a>
                </div>
            </div>
            <div class="c-content-expo__listitem">
                <div class="c-trait ">

                    <div class="c-trait__el livery">
                        <img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
                    </div>

                    <div class="c-trait__el company">
                        <p class="label">Company</p>
                        <p class="txt"><strong>Ryanair</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Linea/Charter</p>
                        <p class="txt"><strong>Linea</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Numero volo</p>
                        <p class="txt"><strong>SLD 504</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Partenza</p>
                        <p class="txt"><strong>14:40</strong></p>
                    </div>

                    <div class="c-trait__el">
                        <p class="label">Arrivo</p>
                        <p class="txt"><strong>15:40</strong></p>
                    </div>

                    <div class="c-trait__el new">
                    </div>

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

        <p class="u-typo-level-4 u-color-night-100">Mappa della città</p>

        <div class="c-citymap ">

            <div class="c-citymap__map">
                <img class="static-map" src="https://maps.googleapis.com/maps/api/staticmap?center=Atene,+Grecia&zoom=14&size=600x300&markers=Atene,+Grecia&key=AIzaSyABU478CeE-kWTe9e86eDm9n4ANtibBd3M" width="100%" alt="">

                <div class="dynamic-map" tabindex="-1">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27720.073525969474!2d23.71457427705499!3d37.98734565478933!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bd1f067043f1%3A0x2736354576668ddd!2sAtene%2C+Grecia!5e0!3m2!1sit!2sit!4v1530710163014" width="100%" height="320" frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>

            </div>

            <div class="c-citymap__footer">
                <a href="https://www.google.com/maps?ll=37.990837,23.738339&z=13&t=m&hl=it-IT&gl=IT&mapclient=embed&q=Atene+Grecia" target="_blank">Visita la città su Google Maps</a>
            </div>

        </div>
    </div>

    <div class="c-content-expo__item c-content-expo__item--main" grid="7@md first@md">
        <h2><strong>Voli Bologna Isola d’Elba</strong></h2>
        <p>
            L'Aeroporto di Bologna offre voli diretti da/per l'Isola d’Elba. In questa pagina trovi tutte le informazioni
            utili.</p>

        <p>
            Isola d’Elba<br />
            Sono molteplici le sfaccettature dell’Isola d’Elba che ne fanno da sempre un paradiso insulare a poca distanza dal
            “continente”. Selvaggia ed incontaminata, super attrezzata e all’avanguardia, per grandi e piccini.</p>

        <p>
            Oltre 147 i chilometri di costa che racchiudono più di 150 spiagge, tutte diverse tra loro: dagli arenili dorati
            alle calette di sassolini, dalle spiagge nere vulcaniche, a quelle di ciottoli bianchissimi. Spiagge celate da
            imponenti scogliere di granito e basalto o che si aprono a ridosso dei centri abitati che punteggiano l’isola. La
            Cotaccia, proprio accanto a Patresi, o Fonza, alla sinistra di Marina di Campo, o ancora una delle tante
            insenature della penisola del Calamita, solo per citare alcune delle calette imperdibili, si trovano a poca
            distanza da tutte le comodità di un soggiorno in pieno relax.</p>

        <p>
            Le famiglie possono tuffarsi in giornate di mare e divertimento. I campeggiatori, zaini in spalla, possono
            soddisfare la loro sete di esplorazione, mentre chi cerca la quiete potrà trovarla nelle località di La Zanca e
            Costa dei Gabbiani. E la sera, i colori e gli schiamazzi dei mercatini di Porto Azzurro, sono un invito a
            lasciarvi avvolgere dalla vivacità dell’isola.</p>

        </p>

        <div class="c-content-expo__footer">
            <button type="button" class="c-button c-button--submit js-fr-dialogmodal-open" aria-controls="dialog-flights-form">

                Acquista il volo

            </button>
            <div class="c-content-expo__media">
                <div class="c-media o-media ">
                    <img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="PDF orari voli 2022" height="" width="32">
                    <div class="c-media__body o-media__body">
                        <a href="#"><strong>Orari voli Estate 2018</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="PDF orari voli 2022" height="" width="32">
                    <div class="c-media__body o-media__body">
                        <a href="#"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb
                    </div>
                </div>
            </div>
        </div>

    </div>

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

  {{!-- Side --}}
  <div class="c-content-expo__item c-content-expo__item--side" grid="4@md offset-9@md">

    <div class="c-content-expo__listitem ">
      <div class="o-flexgrid-inline o-flexgrid--space-between ">
        <div class="c-content-expo__today">
          <div class="icon icon--flight">{{> @icon icon-volo }}</div>
          <div class="c-content-expo__today-info">
            <div>45 min</div>
            <strong class="u-typo-level-1-5">Durata volo</strong>
          </div>
        </div>
        <div class="c-content-expo__today is-last">
          <div class="c-content-expo__weather-assets">
            <img src="{{path '/images/svgs/weather-clouds.svg'}}" alt="Il meteo di oggi è nuvoloso" />
            <img src="{{path '/images/logo-epson-meteo.png'}}" alt="Centro Epson Meteo" width="44" />
          </div>
          <div class="c-content-expo__today-info">
            <div>12°C / 24°C</div>
            <strong class="u-typo-level-1-5">Oggi, nuvoloso</strong>
          </div>
        </div>
      </div>
    </div>

    <p class="u-typo-level-4 u-color-night-100">Aeroporti serviti da Bologna</p>

    <div class="">
      <div class="c-content-expo__listitem ">
        <div class="o-flexgrid-inline o-flexgrid--space-between ">
          <strong>Elba EBA</strong> <a href="#">www.aia.gr</a>
        </div>
      </div>
      <div class="c-content-expo__listitem">
        {{> @trait trait }}
      </div>
      <div class="c-content-expo__listitem">
        {{> @trait trait }}
      </div>
    </div>

    <div class="">
      <div class="c-content-expo__listitem ">
        <div class="o-flexgrid-inline o-flexgrid--space-between ">
          <strong>Atene ATL</strong> <a href="#">www.aia.gr</a>
        </div>
      </div>
      <div class="c-content-expo__listitem">
        {{> @trait trait }}
      </div>
    </div>

    <p class="u-typo-level-4 u-color-night-100">Mappa della città</p>

    {{> @citymap citymap }}

  </div>

  {{!-- Main --}}
  <div class="c-content-expo__item c-content-expo__item--main" grid="7@md first@md">
    <h2><strong>Voli Bologna Isola d’Elba</strong></h2>
    <p>
      L'Aeroporto di Bologna offre voli diretti da/per l'Isola d’Elba. In questa pagina trovi tutte le informazioni
      utili.</p>

    <p>
      Isola d’Elba<br />
      Sono molteplici le sfaccettature dell’Isola d’Elba che ne fanno da sempre un paradiso insulare a poca distanza dal
      “continente”. Selvaggia ed incontaminata, super attrezzata e all’avanguardia, per grandi e piccini.</p>

    <p>
      Oltre 147 i chilometri di costa che racchiudono più di 150 spiagge, tutte diverse tra loro: dagli arenili dorati
      alle calette di sassolini, dalle spiagge nere vulcaniche, a quelle di ciottoli bianchissimi. Spiagge celate da
      imponenti scogliere di granito e basalto o che si aprono a ridosso dei centri abitati che punteggiano l’isola. La
      Cotaccia, proprio accanto a Patresi, o Fonza, alla sinistra di Marina di Campo, o ancora una delle tante
      insenature della penisola del Calamita, solo per citare alcune delle calette imperdibili, si trovano a poca
      distanza da tutte le comodità di un soggiorno in pieno relax.</p>

    <p>
      Le famiglie possono tuffarsi in giornate di mare e divertimento. I campeggiatori, zaini in spalla, possono
      soddisfare la loro sete di esplorazione, mentre chi cerca la quiete potrà trovarla nelle località di La Zanca e
      Costa dei Gabbiani. E la sera, i colori e gli schiamazzi dei mercatini di Porto Azzurro, sono un invito a
      lasciarvi avvolgere dalla vivacità dell’isola.</p>

    </p>

    <div class="c-content-expo__footer">
      {{> @button--adding buy-flight-link }}
      <div class="c-content-expo__media">
        {{> @media pdf }}
        {{> @media pdf }}
      </div>
    </div>

  </div>




</div>
 
{
  "buy-flight-link": {
    "type": "button",
    "text": "Acquista il volo",
    "modifier": "c-button--submit js-fr-dialogmodal-open",
    "opens-dialog": "dialog-flights-form"
  },
  "pdf": {
    "img-src": "/images/svgs/pdf.svg",
    "img-alt": "PDF orari voli 2022",
    "img-width": "32",
    "body": "<a href=\"#\"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb"
  },
  "icon-volo": {
    "class": "c-icon c-icon--48",
    "symbol": "ic_flight_takeoff_black_24px"
  },
  "icon-meteo": {
    "class": "c-icon c-icon--48",
    "symbol": "ic_flight_takeoff_black_24px"
  },
  "trait": {
    "company-logo": "/images/flights-logos/alitalia.png",
    "items": [
      {
        "label": "Codice",
        "text": "A3"
      },
      {
        "label": "Frequenza settimanale",
        "text": "<strong aria-label=\"lunedì\">LUN</strong> <span aria-hidden=\"false\">MAR</span> <strong aria-label=\"mercoledì\">MER</strong> <span aria-hidden=\"false\">GIO</span> <span aria-hidden=\"false\">VEN</span> <strong aria-label=\"sabato\">SAB</strong> DOM"
      }
    ],
    "flight-calendar": true
  },
  "citymap": {
    "map-height": "320"
  }
}
  • 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.