<div class="c-highlight c-highlight--composite">
<div class="c-highlight__content">
<div class="c-highlight__stk">
<img class="" src="/images/svgs/stk_mail_discount_reservation.svg" alt="stk_mail_discount_reservation" aria-hidden="true">
</div>
<div class="c-highlight__msg">
<div class="c-highlight__title typo-small">
<div class="c-highlight__rounded-label"><span class="c-rounded-label c-rounded-label--relevant" aria-label="">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-star-new-black-18px"></use>
</svg>
Novità
</span></div>
<strong>Lorem ipsum, dolor sit amet lorem ipsum, dolor sit amet lorem ipsum, dolor sit amet</strong>
</div>
<div class="c-highlight__text">
<p class='u-hidden-mobile'>Lorem ipsum, dolor sit amet consectetur quia <strong>laborum impedit ipsum</strong></p>
</div>
<div class="c-highlight__text">
<p class='u-hidden-mobile'>Repellat nobis, porro officia, placeat, labore veritatis voluptatum corporis nulla quia laborum <a href="#"><strong>consequuntur illo optio nequ →</strong></a></p>
</div>
</div>
</div>
</div>
<div class="c-highlight {{ modifier }}">
<div class="c-highlight__content">
<div class="c-highlight__stk">
{{#if sticker}}
<img class="" src="{{ sticker.img-src }}" alt="{{ sticker.img-alt }}" aria-hidden="true">
{{/if}}
</div>
<div class="c-highlight__msg">
{{#if title}}
<div class="c-highlight__title typo-small">
{{#if rounded-label}}
<div class="c-highlight__rounded-label">{{> @rounded-label rounded-label }}</div>
{{/if}}
<strong>{{{ title }}}</strong>
</div>
{{/if}}
<div class="c-highlight__text">{{{ text }}}</div>
{{#if text2}}<div class="c-highlight__text">{{{ text2 }}}</div>{{/if}}
</div>
</div>
</div>
{
"text": "<p class='u-hidden-mobile'>Lorem ipsum, dolor sit amet consectetur quia <strong>laborum impedit ipsum</strong></p>",
"modifier": "c-highlight--composite",
"rounded-label": {
"modifier": "c-rounded-label--relevant",
"svg": {
"symbol": "ic-star-new-black-18px",
"class": "c-icon c-icon--24"
},
"text": "Novità"
},
"sticker": {
"img-src": "/images/svgs/stk_mail_discount_reservation.svg",
"img-alt": "stk_mail_discount_reservation"
},
"title": "Lorem ipsum, dolor sit amet lorem ipsum, dolor sit amet lorem ipsum, dolor sit amet",
"text2": "<p class='u-hidden-mobile'>Repellat nobis, porro officia, placeat, labore veritatis voluptatum corporis nulla quia laborum <a href=\"#\"><strong>consequuntur illo optio nequ →</strong></a></p>"
}
.c-highlight {
padding: remify(16px);
background-color: secondary(page, 100);
border-radius: remify(16px);
border-left: remify(4px) solid primary(sky, 120);
text-align: left;
color: secondary(text, 100);
@include min-screen(bp(tablet)) {
padding: remify(24px);
}
h3 {
@include font-scale(level-4);
font-weight: fw(bold);
}
h4 {
@include font-scale(level-3);
font-weight: fw(bold);
}
h5,
h6 {
@include font-scale(level-2);
font-weight: fw(bold);
}
p {
.c-canvas__paper & {
margin-bottom: 0;
}
}
p + p {
margin-top: remify(16px);
}
.c-main--home-society & {
grid-column: main;
max-width: remify(900px);
margin: remify(-56px) auto remify(40px);
background-color: #fff;
@include shadow(medium);
position: relative;
z-index: 1;
@include min-screen(bp(tablet)) {
margin-top: remify(-92px);
}
}
&__title {
font-size: remify(24px);
margin-bottom: 1rem;
}
&__text {
font-size: remify(15px);
margin-bottom: 0.5rem;
p {
font-size: remify(15px);
}
}
&__content {
display: flex;
}
&__stk {
max-width: 180px;
padding-right: 1.5rem;
align-self: center;
}
&__msg {
}
}
/*------------------------------------*\
emergency modifier
\*------------------------------------*/
.c-highlight--emergency {
background-color: #e8ecf2;
border-color: status(negative);
color: primary(night, 120);
margin: remify(48px) 0;
text-align: initial;
z-index: 10;
}
/*------------------------------------*\
grid modifier
\*------------------------------------*/
.c-highlight--grid {
grid-column: main;
max-width: remify(900px);
margin-inline: auto;
margin-bottom: remify(40px);
.c-main--home-travel & {
margin-bottom: remify(110px);
}
.l-travel-home__pagetitle & {
margin-bottom: 0;
margin-top: remify(48px);
}
p,
li,
a {
font-size: remify(16px);
font-weight: fw(regular);
}
.c-main-reservationDetail &,
.c-main--booking-confirm & {
background-color: #fff;
}
}
/*------------------------------------*\
composite rounded modifier
\*------------------------------------*/
.c-highlight--rounded,
.c-highlight--composite {
position: relative;
border: none;
border-radius: remify(100px) remify(80px) remify(8px) remify(100px);
.c-highlight__content {
@include min-screen(bp(phablet)) {
padding-right: remify(24px);
}
}
.c-highlight__title {
@include max-screen(bp(tablet)) {
font-size: remify(16px);
}
}
// .c-highlight__title:has(.c-highlight__rounded-label) {
// display: flex;
// justify-content: space-between;
// align-items: center;
// flex-wrap: wrap;
// }
.c-highlight__title:has(.c-highlight__rounded-label) p,
.c-highlight__title:has(.c-highlight__rounded-label) strong {
margin-right: remify(16px);
}
.c-highlight__rounded-label {
font-size: remify(14px);
margin-bottom: remify(8px);
@include min-screen(bp(tablet)) {
font-size: initial;
}
}
// .c-highlight__rounded-label {
// position: relative;
// left: remify(120px);
// margin-bottom: remify(12px);
// @include min-screen(bp(tablet)) {
// position: absolute;
// left: initial;
// margin-bottom: 0;
// top: remify(24px);
// right: remify(48px);
// }
// }
}
/*------------------------------------*\
Narrow Modifier
\*------------------------------------*/
.c-highlight--narrow {
max-width: remify(740px);
}
/*------------------------------------*\
Small modifier
\*------------------------------------*/
.c-highlight--small {
border-radius: remify(12px);
@include min-screen(bp(tablet)) {
padding: remify(16px);
}
}
/*------------------------------------*\
Warning modifier
\*------------------------------------*/
.c-highlight--warning {
background-color: primary(sun, 20);
border-color: primary(sun, 120);
}
I banner highlight, sono disponibili nelle versioni default, emergency e grid.
Il layout principale delle pagine è basato su css grid. Questo comporta che ogni elemento posizionato in pagina, debba avere una regola che lo posizioni nel punto desiderato.
L’esigenza è quella di poter inserire questi componenti in occasioni eccezionali, quindi il componente deve cercare di adattarsi al contesto in cui viene posizionato. Per far ciò, applicare la classe .c-highlight--grid.
La versione emergency differisce rispetto alla versione default, per il bordo sinistro rosso invece che blu, che si ottiene applicando la classe .c-highlight--emergency.
Queste 2 classi modificatrici possono convivere insieme senza conflitti.
Le pagine della nostra Pattern Library in cui questo componente è stato inserito sono:
I componenti inseriti nelle pagine sopra elencate, sono stati implementati per via dell’emergenza Covid-19. Nel momento in cui verranno tolti dal sito in produzione, questo dovrà avvenire anche nella nostra Pattern Library.