<div class="c-postcard">
<h2>Paga con un click!</h2>
<h3>Prenota il tuo parcheggio e pagalo online fino a 6 ore prima del tuo ingresso.</h3>
<div class="c-postcard__body">
<div class="content">
<strong class="is-block">
Il giorno del tuo ingresso
</strong>
<ol>
<li>Presentati all'entrata del parcheggio prenotato e avvicinati alla colonnina.</li>
<li>Posiziona il QRcode, che trovi sulla tua prenotazione, sotto il lettore della colonnina e attendi la lettura del codice.</li>
<li>Ritira il biglietto d’ingresso, attendi l'apertura della sbarra ed entra.</li>
</ol>
</div>
<div class="content">
<strong class="is-block">
Il giorno della tua uscita
</strong>
<ol>
<li>Presentati all'entrata del parcheggio prenotato e avvicinati alla colonnina.</li>
<li>Posiziona il QRcode, che trovi sulla tua prenotazione, sotto il lettore della colonnina e attendi la lettura del codice.</li>
<li>Ritira il biglietto d’ingresso, attendi l'apertura della sbarra ed entra.</li>
</ol>
</div>
</div>
<div class="c-table_cnt c-table_cnt--noSlide">
<table class="o-table c-table">
<caption class="u-visuallyhidden">Come pagare il parcheggio</caption>
<thead>
<tr>
<th scope="col" class="">Puoi pagare</th>
<th scope="col" class="">Dove</th>
<th scope="col" class="">Quando</th>
<th scope="col" class="u-visuallyhidden">Prenota</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Puoi pagare">Online (carta di credito)</td>
<td data-label="Dove">sul sito dell’aeroporto (Pc, Tablet, Smartphone)</td>
<td data-label="Quando">fino a 6 ore dall’ingresso al parcheggio</td>
<td data-label="Prenota"><a href="#"><strong>Prenota ora</strong></a></td>
</tr>
</tbody>
</table>
</div>
<div class="c-suggestion c-suggestion--simple c-suggestion--pale">
<img src="../../images/svgs/stk_fatturazione.svg" alt="" aria-hidden="true">
<div class="c-suggestion__text">
<strong>Hai bisogno della fattura?</strong>
<p>Se paghi la sosta online puoi richiedere la fattura solo durante l'acquisto e ti sarà inviata via mail. In caso di sosta più lunga rispetto a quella già corrisposta, l'eventuale eccedenza dovrà essere pagata (e richiesta fattura) in Aeroporto presso il Presidio parcheggi.</p>
</div>
</div>
</div>
<div class="c-postcard">
<h2>{{{ title }}}</h2>
<h3>{{{ subtitle }}}</h3>
<div class="c-postcard__body">
<div class="content">
<strong class="is-block">
{{ first-content-title }}
</strong>
{{{ first-content }}}
</div>
<div class="content">
<strong class="is-block">
{{ second-content-title }}
</strong>
{{{ second-content }}}
</div>
</div>
{{#if specificTable}} {{render componentName }} {{else}}
<div class="c-table_cnt {{ table-cnt-modifier }}">
<table class="o-table c-table">
<caption class="u-visuallyhidden">Come pagare il parcheggio</caption>
<thead>
<tr>
{{#each table-head}}
<th scope="col" class="{{this.modifier}}">{{ this.head-title }}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each table-rows}}
<tr>
{{#each this.table-cols}}
<td data-label="{{ this.col-data-label }}">{{{ this.col-content }}}</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/if}} {{> @suggestion--simple suggestion }}
</div>
{
"title": "Paga con un click!",
"subtitle": "Prenota il tuo parcheggio e pagalo online fino a 6 ore prima del tuo ingresso.",
"first-content-title": "Il giorno del tuo ingresso",
"first-content": "<ol><li>Presentati all'entrata del parcheggio prenotato e avvicinati alla colonnina.</li><li>Posiziona il QRcode, che trovi sulla tua prenotazione, sotto il lettore della colonnina e attendi la lettura del codice.</li><li>Ritira il biglietto d’ingresso, attendi l'apertura della sbarra ed entra.</li></ol>",
"second-content-title": "Il giorno della tua uscita",
"second-content": "<ol><li>Presentati all'entrata del parcheggio prenotato e avvicinati alla colonnina.</li><li>Posiziona il QRcode, che trovi sulla tua prenotazione, sotto il lettore della colonnina e attendi la lettura del codice.</li><li>Ritira il biglietto d’ingresso, attendi l'apertura della sbarra ed entra.</li></ol>",
"table-cnt-modifier": "c-table_cnt--noSlide",
"table-head": [
{
"head-title": "Puoi pagare"
},
{
"head-title": "Dove"
},
{
"head-title": "Quando"
},
{
"head-title": "Prenota",
"modifier": "u-visuallyhidden"
}
],
"table-rows": [
{
"table-cols": [
{
"col-data-label": "Puoi pagare",
"col-content": "Online (carta di credito)"
},
{
"col-data-label": "Dove",
"col-content": "sul sito dell’aeroporto (Pc, Tablet, Smartphone)"
},
{
"col-data-label": "Quando",
"col-content": "fino a 6 ore dall’ingresso al parcheggio"
},
{
"col-data-label": "Prenota",
"col-content": "<a href=\"#\"><strong>Prenota ora</strong></a>"
}
]
}
],
"suggestion": {
"modifier": "c-suggestion--pale",
"hasImage": true,
"img-src": "/images/svgs/stk_fatturazione.svg",
"text": "<strong>Hai bisogno della fattura?</strong><p>Se paghi la sosta online puoi richiedere la fattura solo durante l'acquisto e ti sarà inviata via mail. In caso di sosta più lunga rispetto a quella già corrisposta, l'eventuale eccedenza dovrà essere pagata (e richiesta fattura) in Aeroporto presso il Presidio parcheggi.</p>"
}
}
.c-postcard {
background-color: #fff;
padding: remify(24px);
position: relative;
margin-bottom: remify(48px);
@include shadow(medium);
main & {
grid-column: main;
}
@include min-screen(bp(tablet)) {
padding: remify(48px);
}
@include min-screen(bp(tablet-l)) {
margin-bottom: remify(140px);
}
&:last-child {
margin-bottom: 0;
}
h2 {
color: primary(sky, 120);
font-size: 150%;
line-height: 1.333;
margin-bottom: remify(16px);
@include min-screen(bp(tablet)) {
font-size: 200%;
line-height: 1.25;
}
}
h3 {
color: primary(night, 120);
font-weight: fw(bold);
margin-bottom: remify(32px);
a {
font-weight: fw(regular);
}
@include min-screen(bp(tablet)) {
font-size: 125%;
line-height: 1.4;
margin-bottom: remify(48px);
}
}
}
.c-postcard__body {
margin-bottom: remify(32px);
@include min-screen(bp(tablet)) {
display: flex;
}
.content {
margin-right: remify(16px);
margin-bottom: remify(24px);
width: 100%;
&:last-child {
margin-right: 0;
}
@include min-screen(bp(tablet)) {
width: 50%;
margin-bottom: 0;
}
.is-block {
margin-bottom: remify(8px);
display: block;
}
ol {
list-style-position: inside;
}
li {
margin-bottom: remify(8px);
}
}
}
No notes defined.