<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'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--{{ 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": "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"
}
]
}
.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;
}
No notes defined.