<div class="c-itinerary c-folding ">
<div class="switcher">
<a href="" class="is-active">Aspetto una persona</a>
<a href="" class="">Sono un passeggero</a>
</div>
<ul>
<li class="c-itinerary__item c-folding__item">
<div class="c-instructions ">
<div class="c-instructions__main">
<strong class="c-instructions__label">In aeroporto</strong>
<p class="c-instructions__title">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-parking-sign-24px"></use>
</svg>
Parcheggi
</p>
<div class="c-instructions__body">
<p>Devi parcheggiare per poco tempo? <a href="#">Scopri i parcheggi per la sosta breve</a>.</p>
<p>Ti serve sostare per più tempo? <a href="#">Scopri i parcheggi ufficiali dell'aeroporto</a></p>
</div>
</div>
</div>
</li>
<li class="c-itinerary__item c-folding__item">
<div class="c-instructions ">
<div class="c-instructions__main">
<p class="c-instructions__title">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-parking-sign-24px"></use>
</svg>
Parcheggi
</p>
<div class="c-instructions__body">
<p>Devi parcheggiare per poco tempo? <a href="#">Scopri i parcheggi per la sosta breve</a>.</p>
<p>Ti serve sostare per più tempo? <a href="#">Scopri i parcheggi ufficiali dell'aeroporto</a></p>
</div>
</div>
<div class="c-instructions__media ">
<img class="u-OF-cover" src="/images/teaser-breakfast.jpg" alt="">
</div>
</div>
</li>
<li class="c-itinerary__item c-folding__item">
<div class="c-instructions ">
<div class="c-instructions__main">
<p class="c-instructions__title">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-parking-sign-24px"></use>
</svg>
Parcheggi
</p>
<div class="c-instructions__body">
<p>Devi parcheggiare per poco tempo? <a href="#">Scopri i parcheggi per la sosta breve</a>.</p>
<p>Ti serve sostare per più tempo? <a href="#">Scopri i parcheggi ufficiali dell'aeroporto</a></p>
</div>
</div>
</div>
</li>
<li class="c-itinerary__item c-folding__item">
<div class="c-instructions ">
<div class="c-instructions__main">
<strong class="c-instructions__label">In aeroporto</strong>
<p class="c-instructions__title">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-parking-sign-24px"></use>
</svg>
Parcheggi
</p>
<div class="c-instructions__body">
<p>Devi parcheggiare per poco tempo? <a href="#">Scopri i parcheggi per la sosta breve</a>.</p>
<p>Ti serve sostare per più tempo? <a href="#">Scopri i parcheggi ufficiali dell'aeroporto</a></p>
</div>
</div>
</div>
</li>
<li class="c-itinerary__item c-folding__item">
<div class="c-instructions ">
<div class="c-instructions__main">
<p class="c-instructions__title">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-parking-sign-24px"></use>
</svg>
Parcheggi
</p>
<div class="c-instructions__body">
<p>Devi parcheggiare per poco tempo? <a href="#">Scopri i parcheggi per la sosta breve</a>.</p>
<p>Ti serve sostare per più tempo? <a href="#">Scopri i parcheggi ufficiali dell'aeroporto</a></p>
</div>
</div>
<div class="c-instructions__media ">
<img class="u-OF-cover" src="/images/teaser-breakfast.jpg" alt="">
</div>
</div>
</li>
</ul>
</div>
<div class="c-itinerary c-folding {{ modifier }}">
{{#if switcher_items}}
<div class="switcher">
{{#each switcher_items}}
<a href="{{ this.url }}" class="{{ this.class }}">{{ this.text }}</a>
{{/each}}
</div>
{{/if}}
<ul>
{{#each itineraries}}
<li class="c-itinerary__item c-folding__item{{#if class}} {{class}}{{/if}}">
{{> @instructions }}
</li>
{{/each}}
</ul>
</div>
{
"switcher_items": [
{
"text": "Aspetto una persona",
"class": "is-active"
},
{
"text": "Sono un passeggero"
}
],
"itineraries": [
{
"label": "In aeroporto",
"icon": {
"class": "c-icon c-icon--24",
"symbol": "ic-parking-sign-24px"
},
"title": "Parcheggi",
"body": "<p>Devi parcheggiare per poco tempo? <a href=\"#\">Scopri i parcheggi per la sosta breve</a>.</p><p>Ti serve sostare per più tempo? <a href=\"#\">Scopri i parcheggi ufficiali dell'aeroporto</a></p>"
},
{
"icon": {
"class": "c-icon c-icon--24",
"symbol": "ic-parking-sign-24px"
},
"title": "Parcheggi",
"body": "<p>Devi parcheggiare per poco tempo? <a href=\"#\">Scopri i parcheggi per la sosta breve</a>.</p><p>Ti serve sostare per più tempo? <a href=\"#\">Scopri i parcheggi ufficiali dell'aeroporto</a></p>",
"media": "<img class=\"u-OF-cover\" src=\"/images/teaser-breakfast.jpg\" alt=\"\">"
},
{
"icon": {
"class": "c-icon c-icon--24",
"symbol": "ic-parking-sign-24px"
},
"title": "Parcheggi",
"body": "<p>Devi parcheggiare per poco tempo? <a href=\"#\">Scopri i parcheggi per la sosta breve</a>.</p><p>Ti serve sostare per più tempo? <a href=\"#\">Scopri i parcheggi ufficiali dell'aeroporto</a></p>"
},
{
"label": "In aeroporto",
"icon": {
"class": "c-icon c-icon--24",
"symbol": "ic-parking-sign-24px"
},
"title": "Parcheggi",
"body": "<p>Devi parcheggiare per poco tempo? <a href=\"#\">Scopri i parcheggi per la sosta breve</a>.</p><p>Ti serve sostare per più tempo? <a href=\"#\">Scopri i parcheggi ufficiali dell'aeroporto</a></p>"
},
{
"icon": {
"class": "c-icon c-icon--24",
"symbol": "ic-parking-sign-24px"
},
"title": "Parcheggi",
"body": "<p>Devi parcheggiare per poco tempo? <a href=\"#\">Scopri i parcheggi per la sosta breve</a>.</p><p>Ti serve sostare per più tempo? <a href=\"#\">Scopri i parcheggi ufficiali dell'aeroporto</a></p>",
"media": "<img class=\"u-OF-cover\" src=\"/images/teaser-breakfast.jpg\" alt=\"\">"
}
]
}
.c-itinerary {
text-align: center;
background-color: #fff;
.switcher {
display: inline-flex;
margin: 0 auto remify(32px);
justify-content: center;
text-align: center;
align-items: center;
border-radius: remify(16px);
border: 4px solid primary(night, 20);
background-color: primary(night, 20);
a {
text-decoration: none;
padding: remify(8px) remify(16px);
background-color: primary(night, 20);
color: primary(night, 100);
border-radius: remify(12px);
font-size: 100%;
line-height: 1.35;
@include min-screen (bp(tablet)) {
font-size: 100%;
padding: remify(8px) remify(80px);
}
&:first-child {
margin-left: 0;
}
}
// a:hover{
// background-color: primary(night, 40);
// }
a.is-active, {
background-color: primary(night, 80);
color: #fff;
}
}
}
.c-itinerary__item {
background-color: secondary(soft, 100);
padding: remify(16px) 0;
text-align: left;
@include min-screen(bp(tablet)) {
padding-left: remify(52px);
}
}
.c-itinerary__item:first-child {
&:before {
top: 50%;
}
}
.c-itinerary__item:last-child {
&:before {
bottom: 50%;
}
}
.c-itinerary__item--warning {
background-color: primary(sun, 20);
}
No notes defined.