Aeroporto di Bologna - Design System

Brackets 

<div class="c-brackets " aria-label="Ecco i vantaggi di parcheggiare in aeroporto">

    <div class="c-brackets__item">
        <img src="../../images/svgs/stk_bracket-parking-1.svg" alt="Parcheggio ufficiale">
        <p><strong>Official parking a pochi metri</strong> dall'Aerostazione.</p>
    </div>
    <div class="c-brackets__item">
        <img src="../../images/svgs/stk_bracket-parking-2.svg" alt="Rapporto qualità prezzo">
        <p><strong>Miglior</strong> rapporto qualità/prezzo.</p>
    </div>
    <div class="c-brackets__item">
        <img src="../../images/svgs/stk_bracket-parking-3.svg" alt="Tieni le chiavi">
        <p>Tu parcheggi la tua auto e <strong>tu tieni le chiavi.</strong></p>
    </div>
    <div class="c-brackets__item">
        <img src="../../images/svgs/stk_bracket-parking-4.svg" alt="Prezzi speciali">
        <p><strong>Prezzi speciali</strong> per i soci ACI, Coop e <a href="#">molti altri</a>.</p>
    </div>

</div>
 
<div class="c-brackets {{ modifier }}" aria-label="{{ aria-label-title }}">

  {{#each items}}
    <div class="c-brackets__item">
      <img src="{{ path img-path }}" alt="{{ img-alt }}">
      <p>{{{ text }}}</p>
    </div>
  {{/each}}

</div>
 
{
  "aria-label-title": "Ecco i vantaggi di parcheggiare in aeroporto",
  "items": [
    {
      "img-path": "/images/svgs/stk_bracket-parking-1.svg",
      "img-alt": "Parcheggio ufficiale",
      "text": "<strong>Official parking a pochi metri</strong> dall'Aerostazione."
    },
    {
      "img-path": "/images/svgs/stk_bracket-parking-2.svg",
      "img-alt": "Rapporto qualità prezzo",
      "text": "<strong>Miglior</strong> rapporto qualità/prezzo."
    },
    {
      "img-path": "/images/svgs/stk_bracket-parking-3.svg",
      "img-alt": "Tieni le chiavi",
      "text": "Tu parcheggi la tua auto e <strong>tu tieni le chiavi.</strong>"
    },
    {
      "img-path": "/images/svgs/stk_bracket-parking-4.svg",
      "img-alt": "Prezzi speciali",
      "text": "<strong>Prezzi speciali</strong> per i soci ACI, Coop e <a href=\"#\">molti altri</a>."
    }
  ]
}
  • Content: 
    .c-brackets {
  color: primary(night, 100);
  justify-content: space-between;
  position: relative;
  
  @include min-screen( bp(phablet) ) {
    display: flex;
    flex-wrap: wrap;
  }

  main & {
    grid-column: main;
  }

  .c-main--parking-info-home &,
  .c-main--mbl-home &,
  .c-main--flights-landing &,
  .c-main--home-society &,
  .c-main--shopping-home &,
  .c-main--customer-care-home & {
    z-index: $zIndex-brackets;
    max-width: remify(940px);
    margin: 0 auto;
    margin-top: remify(24px);

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      /* IE10+ CSS styles */
      max-width: none;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

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

  // .c-main--fitness-lounge & {
  //   @include min-screen ( bp(tablet) ) {
  //     margin-top: remify(-70px);
  //   }
  // }


  .c-main--mbl-home & {
    max-width: remify(1148px);
  }

  .c-main--shopping-home & {
    margin-bottom: remify(40px);
    width: 100%;
  }

}

.c-brackets__item {
  text-align: center;
  flex: 1 1 remify(190px);
  display: flex;
  align-items: center;
  margin-bottom: remify(16px);

  @include min-screen( bp(phablet) ) {
    display: block;
    padding: 0 remify(16px) remify(16px);
    margin-bottom: 0;
  }

  img {
    margin-bottom: remify(8px);
    margin-right: remify(16px);
    width: 15vw;
    max-width: remify(100px);
    @include min-screen( bp(phablet) ) {
      margin-right: 0;
    }
  }

  p {
    text-align: left;
    @include min-screen( bp(phablet) ) {
      text-align: center;
    }
  }
}

/*------------------------------------*\
  Compact modifier
\*------------------------------------*/

.c-brackets--compact {

  main.tickets-phone & {
    @include min-screen( bp(tablet-p) ) {
      width: 70%;
      margin: 0 auto;
    }
  }

  .c-brackets__item {

    @include min-screen( bp(phablet) ) {
      text-align: center;
      flex: 1 1 remify(220px);
      display: flex;
      align-items: center;
      margin-bottom: remify(16px);
    }

    p {
      @include min-screen( bp(phablet) ) {
        text-align: left;
      }
    }

    img {
      @include min-screen( bp(phablet) ) {
        margin-bottom: remify(8px);
        margin-right: remify(16px);
        // width: 15vw;
        max-width: remify(55px);
        height: remify(55px);
      }
    }

  }

}
  • URL: /components/raw/brackets/_brackets.scss
  • Filesystem Path: src/views/02-molecules/brackets/_brackets.scss
  • Size: 2.4 KB

No notes defined.