Aeroporto di Bologna - Design System

grid pad: Utilities 

<div class="c-grid-pad c-grid-pad--utilities">

    <h3>Sevizi dedicati</h3>
    <div class="c-grid-pad__content">

        <a href="#" class="c-grid-pad__action" aria-label="">
            <img src="/images/svgs/stk_freeWiFi.svg" alt="wi-fi gratuita">

        </a>
        <a href="#" class="c-grid-pad__action" aria-label="">
            <img src="/images/svgs/stk_teapot.svg" alt="area servizi">

        </a>
        <a href="#" class="c-grid-pad__action" aria-label="">
            <img src="/images/svgs/stk_restaurant.svg" alt="area ristoro">

        </a>
        <a href="#" class="c-grid-pad__action" aria-label="">
            <img src="/images/svgs/stk_airportSignage.svg" alt="segnaletica">

        </a>
        <a href="#" class="c-grid-pad__action" aria-label="">
            <img src="/images/svgs/stk_cctv.svg" alt="china centra television">

        </a>
        <a href="#" class="c-grid-pad__action" aria-label="">
            <img src="/images/svgs/stk_unionPay.svg" alt="union pay">

        </a>

    </div>

    <a href="" class="c-grid-pad__text-link">
        Scopri di più
    </a>

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

  <h3>{{ heading }}</h3>
  <div class="c-grid-pad__content">
    
    {{#each items}}
      <a href="#" class="c-grid-pad__action" aria-label="{{ this.text }}">
        <img src="{{ this.icon }}" alt="{{ this.img-alt }}">        
        {{ this.text }}
      </a>
    {{/each}}       

  </div>

  {{#if ctaLink}}
    <a href="" class="c-grid-pad__text-link">
      {{ ctaLink }}
    </a>
  {{/if}}      

</div>
 
{
  "modifier": "utilities",
  "heading": "Sevizi dedicati",
  "items": [
    {
      "icon": "/images/svgs/stk_freeWiFi.svg",
      "img-alt": "wi-fi gratuita"
    },
    {
      "icon": "/images/svgs/stk_teapot.svg",
      "img-alt": "area servizi"
    },
    {
      "icon": "/images/svgs/stk_restaurant.svg",
      "img-alt": "area ristoro"
    },
    {
      "icon": "/images/svgs/stk_airportSignage.svg",
      "img-alt": "segnaletica"
    },
    {
      "icon": "/images/svgs/stk_cctv.svg",
      "img-alt": "china centra television"
    },
    {
      "icon": "/images/svgs/stk_unionPay.svg",
      "img-alt": "union pay"
    }
  ],
  "ctaLink": "Scopri di più",
  "ctaLinkAriaLabel": "Scopri i servizi dedicati"
}
  • Content: 
    .c-grid-pad {

  h3 {
    text-align: center;
    font-size: remify(24px);
    margin: remify(48px) 0 remify(24px);
    color: primary(night, 100);

    @include min-screen(bp(tablet-p)) {
      color: secondary(page, 100);
    }
  }
}

.c-grid-pad__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  @supports (display: grid) {
    display: grid;
    grid-gap: remify(8px);
  
    .c-grid-pad--airport-info & {
      grid-template-columns: repeat(2, 1fr);

      @include min-screen(bp(phone-p)) {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  
    .c-grid-pad--assistance & {
      grid-template-columns: 1fr;
    }
  
    .c-grid-pad--utilities & {
      max-width: remify(468px);
      margin-left: auto;
      margin-right: auto;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: remify(16px) 0;
    }

  }

}

.c-grid-pad__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 remify(12px) remify(12px) 0;

  padding: remify(8px);
  color: secondary(page, 100);
  background-color: primary(night, 100);
  border: remify(1px) solid #71889E;
  border-radius: remify(3px);
  font-size: remify(14px);
  
  @supports (display: grid) {
    margin: 0;
  }

  .c-grid-pad--airport-info & {
    flex: 1 0 29%;
    min-width: 29%;
  }

  .c-grid-pad--assistance & {
    flex: 1 0 100%;
  }

  .c-grid-pad--utilities & {
    flex: 1 0 28%;
    border: initial;
    padding: remify(0px);
    background-color: initial;

    img {
      width: remify(80px);
    }
  }

  img {
    width: remify(40px);
  }

  @include min-screen(bp(phone-p)) {
    padding: remify(16px);
    font-size: remify(16px);
  }
  
}

.c-grid-pad__text-link {
  display: block;
  margin-top: remify(16px);
  text-align: center;

  @include min-screen(bp(tablet-p)) {
    color: secondary(page, 100);
  }
}

.c-grid-pad--airport-info {
  grid-area: left;
}

.c-grid-pad--assistance {
  grid-area: center;
}

.c-grid-pad--utilities {
  grid-area: right;
}
  • URL: /components/raw/grid-pad/_grid-pad.scss
  • Filesystem Path: src/views/02-molecules/grid-pad/_grid-pad.scss
  • Size: 2 KB

No notes defined.