Aeroporto di Bologna - Design System

grid pad: Airport assistance 

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

    <h3>Necessità particolari</h3>
    <div class="c-grid-pad__content">

        <a href="#" class="c-grid-pad__action" aria-label="Famiglie e minori">
            <img src="/images/svgs/ic_minori.svg" alt="famiglie e minori">
            Famiglie e minori
        </a>
        <a href="#" class="c-grid-pad__action" aria-label="Assistenze speciali">
            <img src="/images/svgs/ic_prm.svg" alt="assistenze speciali in aereoporto">
            Assistenze speciali
        </a>

    </div>

</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": "assistance",
  "heading": "Necessità particolari",
  "items": [
    {
      "icon": "/images/svgs/ic_minori.svg",
      "img-alt": "famiglie e minori",
      "text": "Famiglie e minori"
    },
    {
      "icon": "/images/svgs/ic_prm.svg",
      "img-alt": "assistenze speciali in aereoporto",
      "text": "Assistenze speciali"
    }
  ]
}
  • 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.