Aeroporto di Bologna - Design System

Transport hallmark 

<div class="c-transport-hallmark ">

    <div class="c-transport-hallmark__item">
        <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">
                <span class="c-rounded-label c-rounded-label--grey u-typo-level-1">
                    <span aria-hidden="true">&#x2605;</span> <strong>Novità</strong>
                </span>
            </div>

        </div>
    </div>

    <div class="c-transport-hallmark__footer">
        <a href="#">Scopri gli orari dei voli</a>
    </div>

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

  <div class="c-transport-hallmark__item">
    {{> @trait trait }}
  </div>

  {{#if footer-content}}
  <div class="c-transport-hallmark__footer">
    {{{ footer-content }}}
  </div>
  {{/if}}

</div>
 
{
  "trait": {
    "company-logo": "/images/flights-logos/alitalia.png",
    "label_item": true,
    "items": [
      {
        "label": "Codice",
        "text": "A3"
      },
      {
        "label": "Frequenza settimanale",
        "text": "<strong>LU</strong> MA <strong>ME</strong> GI VE <strong>SA</strong> DO"
      }
    ],
    "flight-calendar": true
  },
  "footer-content": "<a href=\"#\">Scopri gli orari dei voli</a>"
}
  • Content: 
    .c-transport-hallmark__header {
  background-color: primary(night, 100);
  color: #fff;
  padding: remify(16px);
  // border-radius: remify(4px) remify(4px) 0 0;
  display: flex;
}

.c-transport-hallmark__item {
  padding: remify(16px) 0;
  background-color: #fff;
  // border-radius: remify(4px);

  & + & {
    border-top: 1px solid primary(sky, 20);
  }

  .c-dialog--dayflight & {
    border-radius: remify(4px);
  }

}

.c-transport-hallmark__footer {
  text-align: center;
  padding: remify(8px) remify(16px);
  background-color: secondary(page, 100);
  border-radius: 0 0 remify(4px) remify(4px);
}

.c-transport-hallmark__close {
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;

  svg * {
    fill: #fff;
  }

}
  • URL: /components/raw/transport-hallmark/_transport-hallmark.scss
  • Filesystem Path: src/views/02-molecules/transport-hallmark/_transport-hallmark.scss
  • Size: 742 Bytes

No notes defined.