Aeroporto di Bologna - Design System

Avvisi 

<div class="c-warnings ">

    <h2 class="c-warnings__title">Avvisi importanti</h2>

    <div class="c-warnings__items">
        <div class="c-warnings__item">
            <div class="c-media o-media c-media--warning">
                <img class="c-media__figure o-media__figure" src="../../images/svgs/tolls.svg" alt="Telepedaggi Telepass e UnipolMove" height="" width="110">
                <div class="c-media__body o-media__body">
                    <strong>Viaggi con un dispositivo per il telepedaggio?</strong><br>Se hai un Telepass o un UnipolMove a bordo non entrare nei varchi d'ingresso dedicato, oppure, disattiva il servizio parcheggi attraverso le specifiche app. In caso di utilizzo del dispositivo, la prenotazione che hai fatto non potrà essere riconosciuta e verrà applicata la tariffa ordinaria.<div><a href="#">Maggiori informazioni su Telepass</a></div>
                    <div><a href="#">Maggiori informazioni su UnipolMove</a></div>
                </div>
            </div>
        </div>
        <div class="c-warnings__item">
            <div class="c-media o-media c-media--warning">
                <img class="c-media__figure o-media__figure" src="../../images/svgs/weekend-fare.svg" alt="Tariffa weekend" height="" width="110">
                <div class="c-media__body o-media__body">
                    <strong>Tariffa weekend</strong><br>Valida tutto l'anno, nei parcheggi P1, P2 e 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. I giorni successivi alla domenica sono soggetti al riconoscimento della tariffa standard.<br><a href="#">Leggi di più</a>
                </div>
            </div>
        </div>
    </div>

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

  {{#if title}}
  <h2 class="c-warnings__title">{{ title }}</h2>
  {{/if}}

  <div class="c-warnings__items">
    {{#each warnings}}
      <div class="c-warnings__item">
        {{> @media--warning}}
      </div>
    {{/each}}
  </div>

</div>
 
{
  "title": "Avvisi importanti",
  "warnings": [
    {
      "modifier": "c-media--warning",
      "img-src": "/images/svgs/tolls.svg",
      "img-alt": "Telepedaggi Telepass e UnipolMove",
      "img-width": "110",
      "body": "<strong>Viaggi con un dispositivo per il telepedaggio?</strong><br>Se hai un Telepass o un UnipolMove a bordo non entrare nei varchi d'ingresso dedicato, oppure, disattiva il servizio parcheggi attraverso le specifiche app. In caso di utilizzo del dispositivo, la prenotazione che hai fatto non potrà essere riconosciuta e verrà applicata la tariffa ordinaria.<div><a href=\"#\">Maggiori informazioni su Telepass</a></div><div><a href=\"#\">Maggiori informazioni su UnipolMove</a></div>"
    },
    {
      "modifier": "c-media--warning",
      "img-src": "/images/svgs/weekend-fare.svg",
      "img-alt": "Tariffa weekend",
      "img-width": "110",
      "body": "<strong>Tariffa weekend</strong><br>Valida tutto l'anno, nei parcheggi P1, P2 e 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. I giorni successivi alla domenica sono soggetti al riconoscimento della tariffa standard.<br><a href=\"#\">Leggi di più</a>"
    }
  ]
}
  • Content: 
    .c-warnings {
  
  main & {
    grid-column: main;
  }

}

.c-warnings__title {
  font-size: 200%;
  text-align: left;
  color: primary(night, 100);
  margin-bottom: remify(16px);
  @include max-screen( bp(tablet) ) {
    font-size: 125%;
  }
}

.c-warnings__item {
  border-bottom: remify(2px) dashed primary(sun, 80);

  &:last-child {
    border-bottom: none;
  }

}

/*------------------------------------*
  Warnings-sky modifier
*------------------------------------*/
.c-warnings--sky {
  .c-warnings__item {
    border-color: primary(sky, 80);
  }
}
  • URL: /components/raw/warnings/_warnings.scss
  • Filesystem Path: src/views/03-organisms/warnings/_warnings.scss
  • Size: 559 Bytes

No notes defined.