<div class="c-hero c-hero--deco c-hero--person animate__animated animate__fadeIn">
<div class="c-hero__content grid">
<div class="c-hero__text-block 8@lg">
<h1 class="c-hero__title">John Doe</h1>
<p class="c-hero__role">Interface Designer</p>
<div class="c-hero__subtitle">Come interface designer, attraverso i colori, la tipografia, le illustrazioni e le microinterazioni metto in connessione gli utenti ai servizi digitali.</div>
<div class="c-hero__socials c-hero__socials--desk">
<div class="c-socials">
<ul class="c-socials__list">
<li class="c-socials__list-item"><a href="#" aria-label="facebook">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-facebook-f-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="instagram">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-instagram-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="linkedin">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-linkedin-in-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="twitter">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-twitter-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="dribble">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-dribbble-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="slideshare">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-slideshare-24px"></use>
</svg> </a>
</li>
</ul>
</div>
</div>
</div>
<div class="c-hero__image-block 4@lg">
<img class="c-hero__image" src="/images/luca.jpg" srcset="/images/luca.jpg" sizes="100vw" alt="lorem ipsum" />
<div class="c-hero__socials c-hero__socials--mobile">
<p class="c-hero__socials__label">Segui John</p>
<div class="c-socials">
<ul class="c-socials__list">
<li class="c-socials__list-item"><a href="#" aria-label="facebook">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-facebook-f-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="instagram">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-instagram-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="linkedin">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-linkedin-in-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="twitter">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-twitter-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="dribble">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-dribbble-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="slideshare">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-slideshare-24px"></use>
</svg> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="c-hero c-hero--deco c-hero--person{% if modifier is defined %} {{ modifier }}{% endif %} animate__animated animate__fadeIn">
<div class="c-hero__content grid">
<div class="c-hero__text-block 8@lg">
<h1 class="c-hero__title">{{ title }}</h1>
<p class="c-hero__role">{{ role }}</p>
<div class="c-hero__subtitle">{{ subtitle }}</div>
{% if entry.socials is defined and entry.socials is not null %}
<div class="c-hero__socials c-hero__socials--desk">
{% include "@socials" with {
socialList: entry.socials
} %}
</div>
{% endif %}
</div>
{% if heroImage %}
<div class="c-hero__image-block 4@lg">
<img class="c-hero__image"
src="{{ heroImage.src }}"
srcset="{{ heroImage.srcset }}"
sizes="100vw"
alt="{{ heroImage.alt }}" />
{% if entry.socials is defined and entry.socials is not null %}
<div class="c-hero__socials c-hero__socials--mobile">
<p class="c-hero__socials__label">{{ socialLabel }}</p>
{% include "@socials" with {
socialList: entry.socials
} %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
{
"title": "John Doe",
"role": "Interface Designer",
"subtitle": "Come interface designer, attraverso i colori, la tipografia, le illustrazioni e le microinterazioni metto in connessione gli utenti ai servizi digitali.",
"heroImage": {
"src": "/images/luca.jpg",
"srcset": "/images/luca.jpg",
"alt": "lorem ipsum"
},
"socialLabel": "Segui John",
"entry": {
"socials": [
{
"name": "facebook|icn-facebook-f-24px",
"url": "#"
},
{
"name": "instagram|icn-instagram-24px",
"url": "#"
},
{
"name": "linkedin|icn-linkedin-in-24px",
"url": "#"
},
{
"name": "twitter|icn-twitter-24px",
"url": "#"
},
{
"name": "dribble|icn-dribbble-24px",
"url": "#"
},
{
"name": "slideshare|icn-slideshare-24px",
"url": "#"
}
]
}
}
.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.