Aeroporto di Bologna - Design System

Highlight: Plain 

<div class="c-highlight c-highlight--plain ">

    <div class="c-highlight__header">
        <p class="c-highlight__title">Hai un Telepass, UnipolMove o altro telepedaggio?</p>
        <div class="images">
            <img src="../../images/svgs/telepass.svg" alt="">
            <img src="../../images/svgs/UnipolMove_logo.svg" alt="">
        </div>
    </div>

    <div class="c-highlight__body">
        <p>Se acquisti il parcheggio online per garantirti un posto riservato, disattiva temporaneamente il dispositivo tramite l’app del servizio prima di accedere al parcheggio, in modo da evitare un doppio pagamento.</p>
        <p>Preferisci pagare con il dispositivo di telepdaggio? In questo caso non è possibile riservare il posto auto perché il pagamento con telepedaggioè disponibile solo al varco parcheggi.</p>
    </div>

    <div class="c-highlight__footer">
        <a href="#">Informazioni sul Telepass</a>
        <a href="#">Informazioni sul UnipolMOve</a>
    </div>

</div>
 
<div class="c-highlight c-highlight--plain {{ modifier }}">

  <div class="c-highlight__header">
    <p class="c-highlight__title">{{ title }}</p>
    {{#if images}}
      <div class="images">
        {{#each images}}
        <img src="{{ path this.src }}" alt="{{this.alt}}">
        {{/each}}
      </div>
    {{/if}}
  </div>

  <div class="c-highlight__body">
    {{#> @partial-block }}
      {{{ text }}}
    {{/ @partial-block }}
  </div>

  <div class="c-highlight__footer">
    {{#each ctas}}
    <a href="#">{{ this.text }}</a>
    {{/each}}
  </div>

</div>
 
{
  "text": "<p>Se acquisti il parcheggio online per garantirti un posto riservato, disattiva temporaneamente il dispositivo tramite l’app del servizio prima di accedere al parcheggio, in modo da evitare un doppio pagamento.</p><p>Preferisci pagare con il dispositivo di telepdaggio? In questo caso non è possibile riservare il posto auto perché il pagamento con telepedaggioè disponibile solo al varco parcheggi.</p>",
  "title": "Hai un Telepass, UnipolMove o altro telepedaggio?",
  "images": [
    {
      "src": "/images/svgs/telepass.svg",
      "alt": ""
    },
    {
      "src": "/images/svgs/UnipolMove_logo.svg",
      "alt": ""
    }
  ],
  "ctas": [
    {
      "text": "Informazioni sul Telepass"
    },
    {
      "text": "Informazioni sul UnipolMOve"
    }
  ]
}
  • Content: 
    .c-highlight {
  padding: remify(16px);
  background-color: secondary(page, 100);
  border-radius: remify(16px);
  border-left: remify(4px) solid primary(sky, 120);
  text-align: left;
  color: secondary(text, 100);

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

  h3 {
    @include font-scale(level-4);
    font-weight: fw(bold);
  }
  h4 {
    @include font-scale(level-3);
    font-weight: fw(bold);
  }
  h5,
  h6 {
    @include font-scale(level-2);
    font-weight: fw(bold);
  }

  p {
    .c-canvas__paper & {
      margin-bottom: 0;
    }
  }

  p + p {
    margin-top: remify(16px);
  }

  .c-main--home-society & {
    grid-column: main;
    max-width: remify(900px);
    margin: remify(-56px) auto remify(40px);
    background-color: #fff;
    @include shadow(medium);
    position: relative;
    z-index: 1;

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

  &__title {
    font-size: remify(24px);
    margin-bottom: 1rem;
  }

  &__text {
    font-size: remify(15px);
    margin-bottom: 0.5rem;
    p {
      font-size: remify(15px);
    }
  }

  &__content {
    display: flex;
  }

  &__stk {
    max-width: 180px;
    padding-right: 1.5rem;
    align-self: center;
  }

  &__msg {
  }
}

/*------------------------------------*\
  emergency modifier
\*------------------------------------*/

.c-highlight--emergency {
  background-color: #e8ecf2;
  border-color: status(negative);
  color: primary(night, 120);
  margin: remify(48px) 0;
  text-align: initial;
  z-index: 10;
}

/*------------------------------------*\
  grid modifier
\*------------------------------------*/

.c-highlight--grid {
  grid-column: main;
  max-width: remify(900px);
  margin-inline: auto;
  margin-bottom: remify(40px);

  .c-main--home-travel & {
    margin-bottom: remify(110px);
  }

  .l-travel-home__pagetitle & {
    margin-bottom: 0;
    margin-top: remify(48px);
  }

  p,
  li,
  a {
    font-size: remify(16px);
    font-weight: fw(regular);
  }

  .c-main-reservationDetail &,
  .c-main--booking-confirm & {
    background-color: #fff;
  }
}

/*------------------------------------*\
  composite rounded modifier
\*------------------------------------*/

.c-highlight--rounded,
.c-highlight--composite {
  position: relative;
  border: none;
  border-radius: remify(100px) remify(80px) remify(8px) remify(100px);

  .c-highlight__content {
    @include min-screen(bp(phablet)) {
      padding-right: remify(24px);
    }
  }

  .c-highlight__title {
    @include max-screen(bp(tablet)) {
      font-size: remify(16px);
    }
  }

  // .c-highlight__title:has(.c-highlight__rounded-label) {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   flex-wrap: wrap;
  // }

  .c-highlight__title:has(.c-highlight__rounded-label) p,
  .c-highlight__title:has(.c-highlight__rounded-label) strong {
    margin-right: remify(16px);
  }

  .c-highlight__rounded-label {
    font-size: remify(14px);
    margin-bottom: remify(8px);

    @include min-screen(bp(tablet)) {
      font-size: initial;
    }

  }

  // .c-highlight__rounded-label {
  //   position: relative;
  //   left: remify(120px);
  //   margin-bottom: remify(12px);

  //   @include min-screen(bp(tablet)) {
  //     position: absolute;
  //     left: initial;
  //     margin-bottom: 0;
  //     top: remify(24px);
  //     right: remify(48px);
  //   }
  // }

}

/*------------------------------------*\
  Narrow Modifier
\*------------------------------------*/

.c-highlight--narrow {
  max-width: remify(740px);
}

/*------------------------------------*\
  Small modifier
\*------------------------------------*/
.c-highlight--small {
  border-radius: remify(12px);
  
  @include min-screen(bp(tablet)) {
    padding: remify(16px);
  }
}

/*------------------------------------*\
  Warning modifier
\*------------------------------------*/
.c-highlight--warning {
  background-color: primary(sun, 20);
  border-color: primary(sun, 120);
}

/*------------------------------------*\
  White modifier
\*------------------------------------*/
.c-highlight--white {
  background-color: secondary(basic-white, 100);
}

/*------------------------------------*\
  Plain modifier
\*------------------------------------*/
.c-highlight--plain {
  background-color: primary(sun, 10);
  border-radius: 0;
  border-left: 0;
  display: flex;
  flex-direction: column;
  gap: remify(24px);

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

  .c-highlight__header {
    display: flex;
    align-items: center;
    gap: remify(16px);
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .c-highlight__header .images {
    display: flex;
    align-items: center;
    gap: remify(16px);

    img {
      height: remify(20px);
    }

  }

  .c-highlight__title {
    @include font-scale(level-3, bold);
    color: primary(night, 120);
    margin-bottom: 0;
  }

  .c-highlight__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: remify(16px);

    a {
      color: primary(night, 120);
      @include font-scale(level-1-5, bold);
    }

  }

}
  • URL: /components/raw/highlight/_highlight.scss
  • Filesystem Path: src/views/01-atoms/highlight/_highlight.scss
  • Size: 5.2 KB

Overview

I banner highlight, sono disponibili nelle versioni default, emergency e grid.

Posizionamento

Il layout principale delle pagine è basato su css grid. Questo comporta che ogni elemento posizionato in pagina, debba avere una regola che lo posizioni nel punto desiderato. L’esigenza è quella di poter inserire questi componenti in occasioni eccezionali, quindi il componente deve cercare di adattarsi al contesto in cui viene posizionato. Per far ciò, applicare la classe .c-highlight--grid. La versione emergency differisce rispetto alla versione default, per il bordo sinistro rosso invece che blu, che si ottiene applicando la classe .c-highlight--emergency. Queste 2 classi modificatrici possono convivere insieme senza conflitti.

Pagine

Le pagine della nostra Pattern Library in cui questo componente è stato inserito sono:

Gestione

I componenti inseriti nelle pagine sopra elencate, sono stati implementati per via dell’emergenza Covid-19. Nel momento in cui verranno tolti dal sito in produzione, questo dovrà avvenire anche nella nostra Pattern Library.