Aeroporto di Bologna - Design System

Highlight: Warning 

<div class="c-highlight c-highlight--warning">
    <h3>Title</h3>
    <h4>Subtitle</h4>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam quia <strong>laborum impedit ipsum</strong> culpa asperiores nulla. Repellat nobis, porro officia, placeat, labore veritatis voluptatum corporis nulla consequuntur illo optio neque.</p>
</div>
 
<div class="c-highlight {{ modifier }}">
  {{{ text }}}
</div>
 
{
  "text": "<h3>Title</h3><h4>Subtitle</h4><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam quia <strong>laborum impedit ipsum</strong> culpa asperiores nulla. Repellat nobis, porro officia, placeat, labore veritatis voluptatum corporis nulla consequuntur illo optio neque.</p>",
  "modifier": "c-highlight--warning"
}
  • 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);
}
  • URL: /components/raw/highlight/_highlight.scss
  • Filesystem Path: src/views/01-atoms/highlight/_highlight.scss
  • Size: 4 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.