Aeroporto di Bologna - Design System

Trait 

<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 class="c-trait {{ modifier }}">

  <div class="c-trait__el livery">
    <img src="{{ path "/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>

  {{#notEqualTo label_div false }}
  <div class="c-trait__el new">
    {{#if label_item}}
    <span class="c-rounded-label c-rounded-label--grey u-typo-level-1">
      <span aria-hidden="true">&#x2605;</span> <strong>Novità</strong>
    </span>
    {{/if}}
  </div>
  {{/notEqualTo}}

</div>
 
{
  "company-logo": "/images/flights-logos/alitalia.png",
  "label_item": true
}
  • Content: 
    .c-trait {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  color: primary(night, 100);
  gap: remify(12px) remify(24px);
  container-type: inline-size;

  .c-tablist & {
    text-align: left;
  }

  @include min-screen(bp(phone-p)) {
    grid-template-columns: repeat(3, 1fr);
  }

  @include min-screen(bp(tablet)) {
    // grid-template-columns: repeat(6, auto);
    grid-template-columns: repeat( auto-fit, minmax(80px, 1fr) );
  }

  // & a:nth-child(2) {
  //   margin-top: remify(8px);

  //   @include min-screen(bp(tablet)) {
  //     margin-top: initial;
  //   }
  // }
}

.c-trait__el {

  p {
    margin-bottom: 0;
  }

  .txt {
    @include font-scale(level-3);
  }

  .label {
    @include font-scale(level-1);
  }

  a {
    color: secondary(text, 100);
  }

}

.c-trait__el.company {
  grid-column: span 2;

  @include min-screen(bp(phone-p)) {
    grid-column: span 1;
  }
}

.c-trait__el.livery {
  display: none;

  @include min-screen(remify(900px)) {
    display: block;
  }

}

@container (max-width: #{remify(900px)}) {
  .c-trait__el.livery {
    display: none;
  }
}

.c-trait__livery_img {
  width: remify(44px);
  height: remify(44px);
  object-fit: contain;
  min-width: remify(32px);
}

.c-trait:has(.c-trait__el.new) {

  @include min-screen(bp(tablet)) {
    // grid-template-columns: repeat(7, auto);
    grid-template-columns: repeat( auto-fit, minmax(80px, 1fr) );
  }

  .c-trait__el.company {
    grid-column: span 1;
  }

}
  • URL: /components/raw/trait/_trait.scss
  • Filesystem Path: src/views/02-molecules/trait/_trait.scss
  • Size: 1.5 KB

No notes defined.