<div class="c-cards c-cards--geeky o-cards ">
<div class="o-cards__item c-cards__item">
<div class="c-card c-card--geeky o-card o-card--geeky " aria-label="">
<img src="../../images/svgs/stk_avatar.svg" class="o-card__img" alt="Utente privato" aria-hidden="true">
<p class="c-card__text o-card__text">
Profilo
</p>
<ul class="c-card__list">
<li>
<a href="/components/preview/page-profile--default">I tuoi dati personali</a>
</li>
<li>
<a href="/components/preview/page-billing-info">I tuoi dati di fatturazione</a>
</li>
<li>
<a href="/components/preview/page-privacy-settings">Le tue impostazioni privacy</a>
</li>
<li>
<a href="/components/preview/page-newsletter-sub">Le tue impostazioni newsletter</a>
</li>
</ul>
</div>
</div>
<div class="o-cards__item c-cards__item">
<div class="c-card c-card--geeky o-card o-card--geeky " aria-label="">
<img src="../../images/svgs/stk_prenotazioni.svg" class="o-card__img" alt="Utente privato" aria-hidden="true">
<p class="c-card__text o-card__text">
Prenotazioni e ordini
</p>
<ul class="c-card__list">
<li>
<a href="/components/preview/page-reservations-list">Le tue prenotazioni</a>
</li>
<li>
<a href="/components/preview/page-orders-list">I tuoi ordini</a>
</li>
<li>
<a href="#">I tuoi voucher digitali</a>
</li>
</ul>
</div>
</div>
<div class="o-cards__item c-cards__item">
<div class="c-card c-card--geeky o-card o-card--geeky " aria-label="">
<img src="../../images/svgs/stk_assistenza.svg" class="o-card__img" alt="Utente privato" aria-hidden="true">
<p class="c-card__text o-card__text">
Supporto
</p>
<ul class="c-card__list">
<li>
<a href="#">Assistenza clienti</a>
</li>
<li>
<a href="/components/preview/page-reclaims-list">Le tue segnalazioni passate</a>
</li>
<li>
<a href="/components/preview/page-reclaims-form">Scrivi per info o reclami</a>
</li>
</ul>
</div>
</div>
</div>
<div class="c-cards c-cards--geeky o-cards {{ modifier }}">
{{#each cards}}
<div class="o-cards__item c-cards__item">
{{> @card--geeky }}
</div>
{{/each}}
</div>
{
"cards": [
{
"img-path": "/images/svgs/stk_avatar.svg",
"img-alt": "Utente privato",
"title": "Profilo",
"list": [
{
"text": "I tuoi dati personali",
"url": "/components/preview/page-profile--default"
},
{
"text": "I tuoi dati di fatturazione",
"url": "/components/preview/page-billing-info"
},
{
"text": "Le tue impostazioni privacy",
"url": "/components/preview/page-privacy-settings"
},
{
"text": "Le tue impostazioni newsletter",
"url": "/components/preview/page-newsletter-sub"
}
]
},
{
"img-path": "/images/svgs/stk_prenotazioni.svg",
"img-alt": "Utente privato",
"title": "Prenotazioni e ordini",
"list": [
{
"text": "Le tue prenotazioni",
"url": "/components/preview/page-reservations-list"
},
{
"text": "I tuoi ordini",
"url": "/components/preview/page-orders-list"
},
{
"text": "I tuoi voucher digitali",
"url": "#"
}
]
},
{
"img-path": "/images/svgs/stk_assistenza.svg",
"img-alt": "Utente privato",
"title": "Supporto",
"list": [
{
"text": "Assistenza clienti",
"url": "#"
},
{
"text": "Le tue segnalazioni passate",
"url": "/components/preview/page-reclaims-list"
},
{
"text": "Scrivi per info o reclami",
"url": "/components/preview/page-reclaims-form"
}
]
}
]
}
.c-cards {
&:hover .c-cards__item:not(:hover) {
@include min-screen( bp(tablet-l) ) {
opacity: .3;
}
}
&:hover .c-cards__item--selected:not(:hover) {
@include min-screen( bp(tablet-l) ) {
opacity: 1;
}
}
label {
padding: 0;
text-transform: initial;
font-weight: initial;
box-shadow: initial;
}
&.is-inInvestor {
max-width: remify(1016px);
margin-left: auto;
margin-right: auto;
}
}
.c-cards__item {
transition: opacity .3s ease;
position: relative;
height: 100%;
.c-form--youfirst & {
height: auto;
display: flex;
flex-direction: column;
& > .o-card {
flex: 1 1 auto;
}
}
.c-cards--geeky & {
height: auto;
}
}
.c-cards__item--selected {
opacity: 1;
}
.c-cards__item--unselected {
opacity: 0.3;
}
.c-cards__item--selected,
.c-cards input[type="radio"]:checked ~ .c-cards__item {
&:after {
content: '';
position: absolute;
top: 0;
right: remify(-1px);
width: remify(8px);
height: 100%;
border-radius: 0 remify(12px) remify(12px) 0;
background-color: status(positive);
}
}
/*------------------------------------*\
Remove hover effect
\*------------------------------------*/
.c-cards--helpdesk,
.c-cards--geeky,
.c-cards--adv {
&:hover .c-cards__item:not(:hover) {
opacity: 1;
}
}
/*------------------------------------*\
Geeky modifier
\*------------------------------------*/
.c-cards--geeky {
main & {
grid-column: main;
}
.c-main--home-society &,
.c-main--landing-golive & {
margin-bottom: remify(80px);
}
}
/*------------------------------------*\
Adv modifier
\*------------------------------------*/
.c-cards--adv {
main & {
grid-column: main;
}
}
No notes defined.