<div class="c-skyscreaper">
<div class="c-skyscreaper__img" style="background-image: url(../../images/room-A.jpg)">
<p class="c-skyscreaper__caption">Sala A</p>
</div>
<div class="c-skyscreaper__content">
<ul class="c-icon-list" aria-label="Caratteristiche sala A">
<li class="c-icon-list__item ">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-man-black-24px"></use>
</svg> <span class="c-icon-list__text"><strong>10</strong> persone massimo</span>
</li>
<li class="c-icon-list__item ">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-mq-room-24px"></use>
</svg> <span class="c-icon-list__text"><strong>20 mq</strong> di superficie</span>
</li>
</ul>
<p class="c-skyscreaper__description">
<strong>Dotazione:</strong> tavolo riunioni attrezzato per collegamenti multimediali, proiettore, schermo e linea telefonica interna.
</p>
</div>
</div>
<div class="c-skyscreaper">
<div class="c-skyscreaper__img" style="background-image: url({{ path img-path }})">
<p class="c-skyscreaper__caption">{{ img-caption }}</p>
</div>
<div class="c-skyscreaper__content">
{{> @icon-list features }}
<p class="c-skyscreaper__description">
{{{ description }}}
</p>
</div>
</div>
{
"img-path": "/images/room-A.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": "<strong>Dotazione:</strong> tavolo riunioni attrezzato per collegamenti multimediali, proiettore, schermo e linea telefonica interna."
}
.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.