<div class="c-postcard">
<div class="grid">
<div class="c-postcard__text-block 6@lg" data-aos="fade-up">
<p class="c-postcard__label">Label text</p>
<h2 class="c-postcard__title">Lorem ipsum dolor sit amet consectetur</h2>
<div class="c-postcard__body">
<p>Lorem ipsum dolor sit <strong>amet</strong> consectetur, adipisicing elit. Delectus quam labore autem iure aperiam nam quos, atque voluptate animi culpa ab eius quis dolores consequuntur nisi repellat nemo assumenda nobis?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus quam labore autem iure aperiam nam quos, atque voluptate animi culpa ab eius quis dolores <strong>consequuntur</strong> nisi repellat nemo assumenda nobis?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus quam labore autem iure aperiam nam quos, atque voluptate animi culpa ab eius quis dolores consequuntur nisi repellat nemo assumenda nobis?</p>
</div>
<div class="c-postcard__actions">
<div class="c-postcard__action">
<a href="#" class="c-action c-action--text" data-notation="underline-cta-accent">Scopri i nostri progetti</a>
</div>
<div class="c-postcard__action">
<a href="#" class="c-action c-action--text" data-notation="underline-cta-accent">Leggi di più su Manuele</a>
</div>
</div>
</div>
<div class="c-postcard__img-block 5@lg offset-8@lg" data-aos="fade-up-right">
<img class="c-postcard__img" src="https://picsum.photos/640/480" srcset="https://picsum.photos/640/480" sizes="100vw" alt="" />
</div>
</div>
</div>
<div class="c-postcard{% if modifier is defined %} {{ modifier }}{% endif %}">
<div class="grid">
<div class="c-postcard__text-block 6@lg" data-aos="fade-up">
{% if label is defined and label is not null %}
<p class="c-postcard__label">{{ label }}</p>
{% endif %}
{% if title is defined and title is not null %}
<h2 class="c-postcard__title">{{ title }}</h2>
{% endif %}
<div class="c-postcard__body">{{ body|raw }}</div>
{% if actions is defined %}
<div class="c-postcard__actions">
{% for item in actions %}
<div class="c-postcard__action">
{% include "@link" with {
text: item.text,
url: item.url,
version: "text"
} %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
<div class="c-postcard__img-block 5@lg offset-8@lg" data-aos="fade-up-right">
<img class="c-postcard__img"
src="{{ image.src|default("") }}"
srcset="{{ image.srcset|default("") }}"
sizes="100vw"
alt="{{ image.alt|default("") }}" />
</div>
</div>
</div>
{
"image": {
"src": "https://picsum.photos/640/480",
"srcset": "https://picsum.photos/640/480",
"alt": ""
},
"label": "Label text",
"title": "Lorem ipsum dolor sit amet consectetur",
"body": "<p>Lorem ipsum dolor sit <strong>amet</strong> consectetur, adipisicing elit. Delectus quam labore autem iure aperiam nam quos, atque voluptate animi culpa ab eius quis dolores consequuntur nisi repellat nemo assumenda nobis?</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus quam labore autem iure aperiam nam quos, atque voluptate animi culpa ab eius quis dolores <strong>consequuntur</strong> nisi repellat nemo assumenda nobis?</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus quam labore autem iure aperiam nam quos, atque voluptate animi culpa ab eius quis dolores consequuntur nisi repellat nemo assumenda nobis?</p>",
"actions": [
{
"text": "Scopri i nostri progetti",
"url": "#",
"version": "text"
},
{
"text": "Leggi di più su Manuele",
"url": "#",
"version": "text"
}
]
}
.c-postcard {
background-color: useHSL(--primary-100);
margin-top: spacing(space-48);
margin-bottom: spacing(space-48);
padding-top: spacing(space-24);
padding-bottom: spacing(space-24);
@include min-screen(bp(large)) {
margin-top: spacing(space-96);
margin-bottom: spacing(space-96);
padding-top: spacing(space-96);
padding-bottom: spacing(space-96);
}
}
.c-postcard__img-block {
margin-top: spacing(space-48);
@include min-screen(bp(large)) {
margin-top: 0;
}
}
.c-postcard__img {
width: 100%;
height: remify(320px);
object-fit: cover;
object-position: center center;
@include min-screen(bp(medium)) {
height: remify(440px);
}
@include min-screen(bp(large)) {
height: remify(560px);
}
}
.c-postcard__text-block {
color: useHSL(--base-100);
}
.c-postcard__label {
@include font-scale(level-2, $font-secondary, bold);
margin-bottom: spacing(space-12);
}
.c-postcard__title {
@include font-scale(level-6, $font-primary, extrabold);
margin-bottom: spacing(space-24);
}
.c-postcard__body {
@include font-scale(level-5, $font-primary, regular);
p + p {
margin-top: spacing(space-24);
}
}
.c-postcard .c-action {
color: currentColor;
}
.c-postcard__actions {
display: flex;
flex-wrap: wrap;
gap: spacing(space-24);
margin-top: spacing(space-24);
}
/*------------------------------------*
Modifier: bottomless
*------------------------------------*/
.c-postcard--bottomless {
margin-bottom: 0;
}
/*------------------------------------*
Modifier: topless
*------------------------------------*/
.c-postcard--topless {
margin-top: 0;
}
No notes defined.