<div class="c-callout c-callout--imageless">
<div class="c-callout__title">Vuoi più informazioni su questo progetto o ne vuoi iniziare uno nuovo?</div>
<div class="c-callout__actions">
<div class="c-callout__action">
<a href="#" class="c-action c-action--brick">nicolo.volpato@tangible.is</a>
</div>
</div>
</div>
<div class="c-callout c-callout--imageless{% if modifier is defined %} {{ modifier }}{% endif %}">
<div class="c-callout__title">{{ title }}</div>
<div class="c-callout__actions">
{% for item in actions %}
<div class="c-callout__action">
{%- set component = item.version|split('|') -%}
{% include "@" ~ component[0] with {
text: item.text,
url: item.url,
version: component[1]
} %}
</div>
{% endfor %}
</div>
</div>
{#
0|1
0 refers to component
1 refers to version
#}
{
"title": "Vuoi più informazioni su questo progetto o ne vuoi iniziare uno nuovo?",
"actions": [
{
"text": "nicolo.volpato@tangible.is",
"url": "#",
"version": "link|brick"
}
]
}
.c-callout {
background-color: useHSL(--base-100);
margin-top: spacing(space-96);
margin-bottom: spacing(space-96);
}
.c-callout__img {
width: 100%;
}
.c-callout__body {
width: 100%;
max-width: remify(745px);
margin-left: auto;
margin-right: auto;
}
.c-callout__title {
@include font-scale(level-7, $font-primary, regular);
color: useHSL(--primary-100);
margin-bottom: spacing(space-24);
}
.c-callout__actions {
display: flex;
flex-wrap: wrap;
gap: spacing(space-24);
}
/*------------------------------------*
Modifier: imageless
*------------------------------------*/
.c-callout--imageless {
.c-callout__title {
margin-bottom: spacing(space-56);
text-align: center;
}
.c-callout__actions {
justify-content: center;
}
}
/*------------------------------------*
Modifier: form
*------------------------------------*/
.c-callout--form {
.c-callout__body {
width: 100%;
max-width: remify(900px);
margin-left: auto;
margin-right: initial;
}
}
No notes defined.