Aeroporto di Bologna - Design System

grid board 

<div class="c-grid-board" id="grid_board_scroll">

    <div class="c-grid-pad c-grid-pad--airport-info">

        <h3>Informazioni utili</h3>
        <div class="c-grid-pad__content">

            <a href="#" class="c-grid-pad__action" aria-label="Trasporti">
                <img src="/images/svgs/ic_trasporti.svg" alt="trasporti in aereoporto">
                Trasporti
            </a>
            <a href="#" class="c-grid-pad__action" aria-label="Bagagli">
                <img src="/images/svgs/ic_bagaglio.svg" alt="informazioni bagagli in aereoporto">
                Bagagli
            </a>
            <a href="#" class="c-grid-pad__action" aria-label="Sicurezza">
                <img src="/images/svgs/ic_sicurezza.svg" alt="sicurezza in aereoporto">
                Sicurezza
            </a>
            <a href="#" class="c-grid-pad__action" aria-label="Mappe">
                <img src="/images/svgs/ic_mappa.svg" alt="mappe dell&#x27;aereoporto">
                Mappe
            </a>
            <a href="#" class="c-grid-pad__action" aria-label="Shopping">
                <img src="/images/svgs/ic_shopping.svg" alt="shopping in aereoporto">
                Shopping
            </a>
            <a href="#" class="c-grid-pad__action" aria-label="Assistenza">
                <img src="/images/svgs/ic_assistenza-clienti.svg" alt="assistenza in aereoporto">
                Assistenza
            </a>

        </div>

    </div>

    <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--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>
 
<div class="c-grid-board" id="grid_board_scroll">
  {{> "@grid-pad--info" pad-info }}
  {{> "@grid-pad--assistance" pad-assistance }}
  {{> "@grid-pad--utilities" pad-utilities }}
</div>
 
{
  "pad-info": {
    "modifier": "airport-info",
    "heading": "Informazioni utili",
    "items": [
      {
        "icon": "/images/svgs/ic_trasporti.svg",
        "img-alt": "trasporti in aereoporto",
        "text": "Trasporti"
      },
      {
        "icon": "/images/svgs/ic_bagaglio.svg",
        "img-alt": "informazioni bagagli in aereoporto",
        "text": "Bagagli"
      },
      {
        "icon": "/images/svgs/ic_sicurezza.svg",
        "img-alt": "sicurezza in aereoporto",
        "text": "Sicurezza"
      },
      {
        "icon": "/images/svgs/ic_mappa.svg",
        "img-alt": "mappe dell'aereoporto",
        "text": "Mappe"
      },
      {
        "icon": "/images/svgs/ic_shopping.svg",
        "img-alt": "shopping in aereoporto",
        "text": "Shopping"
      },
      {
        "icon": "/images/svgs/ic_assistenza-clienti.svg",
        "img-alt": "assistenza in aereoporto",
        "text": "Assistenza"
      }
    ]
  },
  "pad-assistance": {
    "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"
      }
    ]
  },
  "pad-utilities": {
    "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-board {

  @supports (display: grid) {
    @include min-screen(bp(tablet-p)) {
      display: grid;
      grid-template-columns: 3fr 1fr 3fr 1fr 3fr;
      grid-template-areas: "left space-l center space-r right";
    }
  }
}
  • URL: /components/raw/grid-board/_grid-board.scss
  • Filesystem Path: src/views/03-organisms/grid-board/_grid-board.scss
  • Size: 233 Bytes

No notes defined.