<div class="c-warnings c-warnings--sky">
<p class="c-warnings__title">Come accedere alla VIP Lounge</p>
<div class="c-warnings__items">
<div class="c-warnings__item">
<div class="c-media o-media c-media--warning c-media--warning-sky">
<img class="c-media__figure o-media__figure" src="../../images/svgs/weekend-fare.svg" alt="Component title" height="" width="110">
<div class="c-media__body o-media__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, ab cumque? Sunt, nostrum beatae corporis recusandae necessitatibus quos, earum quo consequatur quod suscipit debitis exercitationem officiis minima eaque maiores esse.
<a href="#">Text link</a>
</div>
</div>
</div>
<div class="c-warnings__item">
<div class="c-media o-media c-media--warning c-media--warning-sky">
<img class="c-media__figure o-media__figure" src="../../images/svgs/weekend-fare.svg" alt="Component title" height="" width="110">
<div class="c-media__body o-media__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, ab cumque? Sunt, nostrum beatae corporis recusandae necessitatibus quos, earum quo consequatur quod suscipit debitis exercitationem officiis minima eaque maiores esse.
<a href="#">Text link</a>
</div>
</div>
</div>
<div class="c-warnings__item">
<div class="c-media o-media c-media--warning c-media--warning-sky">
<img class="c-media__figure o-media__figure" src="../../images/svgs/weekend-fare.svg" alt="Component title" height="" width="110">
<div class="c-media__body o-media__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, ab cumque? Sunt, nostrum beatae corporis recusandae necessitatibus quos, earum quo consequatur quod suscipit debitis exercitationem officiis minima eaque maiores esse.
<a href="#">Text link</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-warnings {{ modifier }}">
{{#if title}}
<p class="c-warnings__title">{{ title }}</p>
{{/if}}
<div class="c-warnings__items">
{{#each warnings}}
<div class="c-warnings__item">
{{> @media--warning}}
</div>
{{/each}}
</div>
</div>
{
"title": "Come accedere alla VIP Lounge",
"warnings": [
{
"modifier": "c-media--warning c-media--warning-sky",
"img-src": "/images/svgs/weekend-fare.svg",
"img-alt": "Component title",
"img-width": "110",
"body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, ab cumque? Sunt, nostrum beatae corporis recusandae necessitatibus quos, earum quo consequatur quod suscipit debitis exercitationem officiis minima eaque maiores esse.",
"cta": {
"url": "#",
"text": "Text link"
}
},
{
"modifier": "c-media--warning c-media--warning-sky",
"img-src": "/images/svgs/weekend-fare.svg",
"img-alt": "Component title",
"img-width": "110",
"body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, ab cumque? Sunt, nostrum beatae corporis recusandae necessitatibus quos, earum quo consequatur quod suscipit debitis exercitationem officiis minima eaque maiores esse.",
"cta": {
"url": "#",
"text": "Text link"
}
},
{
"modifier": "c-media--warning c-media--warning-sky",
"img-src": "/images/svgs/weekend-fare.svg",
"img-alt": "Component title",
"img-width": "110",
"body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, ab cumque? Sunt, nostrum beatae corporis recusandae necessitatibus quos, earum quo consequatur quod suscipit debitis exercitationem officiis minima eaque maiores esse.",
"cta": {
"url": "#",
"text": "Text link"
}
}
],
"modifier": "c-warnings--sky"
}
.c-warnings {
main & {
grid-column: main;
}
}
.c-warnings__title {
font-size: 200%;
text-align: left;
color: primary(night, 100);
margin-bottom: remify(16px);
@include max-screen( bp(tablet) ) {
font-size: 125%;
}
}
.c-warnings__item {
border-bottom: remify(2px) dashed primary(sun, 80);
&:last-child {
border-bottom: none;
}
}
/*------------------------------------*
Warnings-sky modifier
*------------------------------------*/
.c-warnings--sky {
.c-warnings__item {
border-color: primary(sky, 80);
}
}
No notes defined.