<div class="c-hero c-hero--simple animate__animated animate__fadeIn">
<div class="c-hero__content">
<p class="c-hero__label">Lorem ipsum dolor</p>
<h1 class="c-hero__title">Progettiamo servizi e prodotti digitali che generano impatto positivo sul tuo business, sulle persone che li utilizzano e sull'ecosistema in cui sono integrati.</h1>
<div class="c-hero__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit adipiscing pulvinar at massa sed commodo. Tellus sit amet nec platea amet enim nec tortor libero. Pellentesque sit commodo, auctor congue amet et. Senectus.</div>
</div>
</div>
<div class="c-hero c-hero--simple{% if modifier is defined %} {{ modifier }}{% endif %} animate__animated animate__fadeIn">
<div class="c-hero__content">
{% if label is defined %}
<p class="c-hero__label">{{ label }}</p>
{% endif %}
<h1 class="c-hero__title">{{ title|raw }}</h1>
{% if subtitle is defined %}
<div class="c-hero__subtitle">{{ subtitle }}</div>
{% endif %}
</div>
</div>
{
"label": "Lorem ipsum dolor",
"title": "Progettiamo servizi e prodotti digitali che generano impatto positivo sul tuo business, sulle persone che li utilizzano e sull'ecosistema in cui sono integrati.",
"subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit adipiscing pulvinar at massa sed commodo. Tellus sit amet nec platea amet enim nec tortor libero. Pellentesque sit commodo, auctor congue amet et. Senectus."
}
.c-hero {
margin-top: spacing(space-48);
margin-bottom: spacing(space-48);
position: relative;
@include min-screen(bp(large)) {
margin-top: spacing(space-96);
margin-bottom: spacing(space-96);
}
&:after {
content: '';
display: block;
width: remify(64px);
height: remify(2px);
background-color: useHSL(--accent-100);
position: absolute;
left: 0;
bottom: 0;
}
}
.c-hero__content {
padding-bottom: spacing(space-24);
@include min-screen(bp(small)) {
padding-bottom: spacing(space-48);
}
@include min-screen(bp(xlarge)) {
padding-bottom: spacing(space-96);
}
}
.c-hero__title {
@include font-scale(level-9, $font-primary, regular);
color: useHSL(--primary-100);
}
.c-hero__subtitle {
@include font-scale(level-7, $font-primary, regular);
color: useHSL(--primary-100);
margin-top: spacing(space-24);
a {
color: useHSL(--primary-100);
text-decoration-color: useHSL(--accent-100);
}
}
.c-hero__label {
@include font-scale(level-2, $font-secondary, bold);
color: useHSL(--primary-100);
}
/*------------------------------------*
Person
*------------------------------------*/
.c-hero--person {
margin-top: spacing(space-24);
margin-bottom: spacing(space-24);
@include min-screen(bp(large)) {
margin-top: spacing(space-48);
margin-bottom: spacing(space-48);
}
.c-hero__content {
@include min-screen(bp(large)) {
padding-bottom: 0;
}
}
.c-hero__image {
width: 100%;
max-width: remify(375px);
aspect-ratio: 1/1;
object-fit: cover;
object-position: center top;
margin-top: spacing(space-24);
@include min-screen(bp(large)) {
margin-top: 0;
max-width: 100%;
width: remify(592px);
}
}
.c-hero__title {
@include font-scale(level-9, $font-primary, extrabold);
}
.c-hero__role {
@include font-scale(level-5, $font-primary, regular);
color: useHSL(--primary-100);
margin-top: spacing(space-2);
@include min-screen(bp(large)) {
margin-top: spacing(space-8);
}
}
.c-hero__subtitle {
margin-top: spacing(space-16);
@include min-screen(bp(large)) {
margin-top: spacing(space-24);
}
}
.c-hero__socials {
margin-top: spacing(space-16);
@include min-screen(bp(large)) {
margin-top: spacing(space-24);
}
}
.c-hero__socials--mobile {
@include min-screen(bp(large)) {
display: none;
}
}
.c-hero__socials--desk {
display: none;
margin-bottom: spacing(space-24);
@include min-screen(bp(large)) {
display: block;
}
}
.c-hero__socials__label {
@include font-scale(level-0, $font-secondary, bold);
color: useHSL(--primary-100);
margin-bottom: spacing(space-16);
}
}
/*------------------------------------*
Bolded title
*------------------------------------*/
.c-hero--bolded-title {
.c-hero__title {
@include font-scale(level-9, $font-primary, extrabold);
}
}
No notes defined.