<div class="c-skyscreaper c-skyscreaper--extra">
<a href="#" class="c-skyscreaper__img" style="background-image: url(../../images/launch-transports.jpg)"></a>
<div class="c-skyscreaper__content">
<div class="c-skyscreaper__date-tag">
<p class="c-skyscreaper__date">17/03/2022</p>
<p class="c-skyscreaper__tag">News</p>
</div>
<p class="c-skyscreaper__title">Festa della Musica all'Aeroporto Marconi</p>
<p class="c-skyscreaper__description">
La Festa della Musica sbarca all’Aeroporto di Bologna con un concerto della Martini Brass Band, l’ensemble di 35 elementi tra...
</p>
<a class="c-skyscreaper__readmore" href="#">Leggi di più →</a>
</div>
</div>
<div class="c-skyscreaper c-skyscreaper--extra">
{{#if img-path}}
<a href="{{ readmore.url }}" class="c-skyscreaper__img" style="background-image: url({{ path img-path }})"></a>
{{/if}}
<div class="c-skyscreaper__content">
<div class="c-skyscreaper__date-tag">
{{#if date}}
<p class="c-skyscreaper__date">{{ date }}</p>
{{/if}}
<p class="c-skyscreaper__tag">{{ tag }}</p>
</div>
<p class="c-skyscreaper__title">{{ title }}</p>
<p class="c-skyscreaper__description">
{{{ description }}}
</p>
<a class="c-skyscreaper__readmore" href="{{ readmore.url }}">{{{ readmore.text }}}</a>
</div>
</div>
{
"img-path": "/images/launch-transports.jpg",
"img-caption": "Sala A",
"features": {
"items": [
{
"icon": "ic-man-black-24px",
"text": "<strong>10</strong> persone massimo"
},
{
"icon": "ic-mq-room-24px",
"text": "<strong>20 mq</strong> di superficie"
}
],
"aria-label": "Caratteristiche sala A"
},
"description": "La Festa della Musica sbarca all’Aeroporto di Bologna con un concerto della Martini Brass Band, l’ensemble di 35 elementi tra...",
"date": "17/03/2022",
"tag": "News",
"title": "Festa della Musica all'Aeroporto Marconi",
"readmore": {
"url": "#",
"text": "Leggi di più →"
}
}
.c-skyscreaper {
background-color: secondary(soft, 100);
padding: 0;
border-radius: remify(24px);
@include shadow(medium);
.c-carousel--equalH & {
height: 100%;
}
}
.c-skyscreaper__img {
display: block;
height: remify(160px);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
border-radius: remify(24px) remify(24px) 0 0;
position: relative;
@include min-screen(bp(phablet)) {
height: remify(240px);
}
&:after {
content: '';
position: absolute;
z-index: 0;
width: 100%;
height: 65%;
bottom: 0;
left: 0;
border-radius: remify(8px);
// @include bg-gradient-t2b(transparent, #000);
background: linear-gradient(360deg, #12385D 0%, rgba(0, 0, 0, 0) 100%);
box-shadow: inset 0px 0px 16px rgba(15, 47, 77, 0.18);
opacity: .8;
}
}
.c-skyscreaper__content {
padding: remify(16px);
}
.c-skyscreaper__caption {
color: #fff;
z-index: 1;
position: absolute;
bottom: remify(32px);
left: 50%;
text-align: center;
font-size: 200%;
width: 90%;
transform: translate(-50%);
}
// .c-skyscreaper__tag,
// .c-skyscreaper__title,
// .c-skyscreaper__description,
// .c-skyscreaper__readmore {
// padding-left: remify(16px);
// padding-right: remify(16px);
// }
.c-skyscreaper__description {
margin-top: remify(24px);
// padding-bottom: remify(16px);
}
.c-skyscreaper__date-tag {
margin-bottom: remify(8px);
}
.c-skyscreaper__date {
@include font-scale(level-2);
color: secondary(text, 100);
display: inline-block;
&::after {
content: "-";
padding: 0 remify(8px);
}
}
.c-skyscreaper__tag {
@include font-scale(level-2, bold);
color: primary(sky, 100);
display: inline-block;
}
.c-rounded-label+.c-skyscreaper__tag {
margin-top: remify(40px);
}
.c-skyscreaper__title {
color: primary(night, 100);
font-size: 125%;
line-height: 1.4;
@include min-screen(bp(tablet)) {
font-size: 150%;
line-height: 1.333;
}
}
.c-skyscreaper__readmore {
padding-top: remify(16px);
color: primary(night, 100);
display: inline-block;
}
/*------------------------------------*\
Extra modifier
\*------------------------------------*/
.c-skyscreaper--extra {
position: relative;
.c-skyscreaper__title {
@include font-scale(level-4, semibold);
color: secondary(text, 100);
}
.c-skyscreaper__description {
display: none;
@include font-scale(level-2);
color: secondary(text, 100);
@include min-screen(bp(tablet)) {
display: block;
}
}
.c-skyscreaper__readmore {
@include font-scale(level-2, semibold);
}
.c-carousel & {
@include shadow(small);
}
}
No notes defined.