<div class="c-utils c-utils--flight">
<div class="c-utils__item">
<p class="title">Dati passeggeri</p>
<section class="c-carousel c-carousel--flight-passengers" aria-label="Dati passeggeri">
<div class="jsInstance owl-carousel">
<div id="aCaso" class="c-carousel__item">
<div class="c-identity ">
<img src="../../images/svgs/personal-data.svg" alt="I tuoi dati di prenotazione" aria-hidden="true">
<div class="c-identity__info">
<strong class="c-identity__title">1° passeggero</strong>
<dl>
<dt>Nome</dt>
<dd>Mario</dd>
<dt>Cognome</dt>
<dd>Rossi</dd>
<dt>E-mail</dt>
<dd>mariorossi@gmail.com</dd>
<dt>Telefono</dt>
<dd>348 1234567</dd>
</dl>
</div>
</div>
</div>
<div id="aCaso" class="c-carousel__item">
<div class="c-identity ">
<img src="../../images/svgs/personal-data.svg" alt="I tuoi dati di prenotazione" aria-hidden="true">
<div class="c-identity__info">
<strong class="c-identity__title">2° passeggero</strong>
<dl>
<dt>Nome</dt>
<dd>Mario</dd>
<dt>Cognome</dt>
<dd>Rossi</dd>
<dt>E-mail</dt>
<dd>mariorossi@gmail.com</dd>
<dt>Telefono</dt>
<dd>348 1234567</dd>
</dl>
</div>
</div>
</div>
<div id="aCaso" class="c-carousel__item">
<div class="c-identity ">
<img src="../../images/svgs/personal-data.svg" alt="I tuoi dati di prenotazione" aria-hidden="true">
<div class="c-identity__info">
<strong class="c-identity__title">3° passeggero</strong>
<dl>
<dt>Nome</dt>
<dd>Mario</dd>
<dt>Cognome</dt>
<dd>Rossi</dd>
<dt>E-mail</dt>
<dd>mariorossi@gmail.com</dd>
<dt>Telefono</dt>
<dd>348 1234567</dd>
</dl>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="c-utils__item">
<p class="title">Dati pagamento</p>
<div class="c-identity c-identity--simple">
<div class="c-identity__info">
<dl>
<dt>Metodo</dt>
<dd>Carta di credito</dd>
<dt>Carta</dt>
<dd>American Express</dd>
<dt>Titolare</dt>
<dd>Mario Rossi</dd>
<dt>Numero carta</dt>
<dd>**** **** **** 3456</dd>
<dt>Valida fino al</dt>
<dd>04/2025</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="c-utils c-utils--flight">
<div class="c-utils__item">
<p class="title">Dati passeggeri</p>
{{> @carousel--default carousel }}
</div>
<div class="c-utils__item">
<p class="title">Dati pagamento</p>
{{> @identity--simple payment-data }}
</div>
</div>
{
"carousel": {
"modifier": "c-carousel--flight-passengers",
"aria-label-title": "Dati passeggeri",
"items": [
{
"componentName": "@identity",
"componentInstance": {
"title": "1° passeggero"
}
},
{
"componentName": "@identity",
"componentInstance": {
"title": "2° passeggero"
}
},
{
"componentName": "@identity",
"componentInstance": {
"title": "3° passeggero"
}
}
]
},
"payment-data": {
"modifier": "c-identity--simple",
"title": null,
"list": [
{
"title": "Metodo",
"description": "Carta di credito"
},
{
"title": "Carta",
"description": "American Express"
},
{
"title": "Titolare",
"description": "Mario Rossi"
},
{
"title": "Numero carta",
"description": "**** **** **** 3456"
},
{
"title": "Valida fino al",
"description": "04/2025"
}
]
}
}
$utils-breakpoint: 1280px;
.c-utils {
grid-column: main;
margin-top: remify(24px);
@include min-screen ( remify($utils-breakpoint) ) {
display: flex;
}
.c-utils__item {
margin-bottom: remify(24px);
@include min-screen ( remify($utils-breakpoint) ) {
display: flex;
flex-direction: column;
flex: 1 1 33%;
margin-right: remify(16px);
&:last-child {
margin-right: 0;
}
&.is-double {
flex: 2 1 66%;
}
}
.title {
font-size: 200%;
text-align: left;
color: primary(night, 100);
margin-bottom: remify(16px);
@include max-screen( bp(tablet) ) {
font-size: 125%;
}
}
}
}
/*------------------------------------*\
Flight modifier
\*------------------------------------*/
.c-utils--flight {
.c-utils__item {
@include min-screen ( remify($utils-breakpoint) ) {
max-width: 50%;
}
}
}
No notes defined.