<div class="c-customer-logos">
<p class="c-customer-logos__label">I nostri clienti</p>
<div class="c-customer-logos__title">
<h2>
<p>Abbiamo esperienza di ogni complessità, dalla startup alla grande azienda</p>
</h2>
</div>
<ul class="c-customer-logos__list grid 6 3@lg 2@xl">
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/145/230/106" alt="alt text 1" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/183/230/106" alt="alt text 2" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/88/230/106" alt="alt text 3" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/199/230/106" alt="alt text 1" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/25/230/106" alt="alt text 2" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/126/230/106" alt="alt text 3" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/47/230/106" alt="alt text 1" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/171/230/106" alt="alt text 2" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/28/230/106" alt="alt text 3" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/170/230/106" alt="alt text 1" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/130/230/106" alt="alt text 2" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/188/230/106" alt="alt text 3" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/108/230/106" alt="alt text 1" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/84/230/106" alt="alt text 2" class="c-customer-logos__image">
</li>
<li class="c-customer-logos__list__item">
<img src="https://picsum.photos/id/14/230/106" alt="alt text 3" class="c-customer-logos__image">
</li>
</ul>
</div>
<div class="c-customer-logos{% if modifier is defined %} {{ modifier }}{% endif %}">
<p class="c-customer-logos__label">{{ label }}</p>
<div class="c-customer-logos__title">{{ title }}</div>
<ul class="c-customer-logos__list grid {{ cssGridCols }}">
{% for item in items %}
<li class="c-customer-logos__list__item">
<img src="{{ item.src }}" alt="{{ item.alt }}" class="c-customer-logos__image">
</li>
{% endfor %}
</ul>
</div>
{
"label": "I nostri clienti",
"title": "<h2><p>Abbiamo esperienza di ogni complessità, dalla startup alla grande azienda</p></h2>",
"cssGridCols": "6 3@lg 2@xl",
"items": [
{
"src": "https://picsum.photos/id/145/230/106",
"alt": "alt text 1"
},
{
"src": "https://picsum.photos/id/183/230/106",
"alt": "alt text 2"
},
{
"src": "https://picsum.photos/id/88/230/106",
"alt": "alt text 3"
},
{
"src": "https://picsum.photos/id/199/230/106",
"alt": "alt text 1"
},
{
"src": "https://picsum.photos/id/25/230/106",
"alt": "alt text 2"
},
{
"src": "https://picsum.photos/id/126/230/106",
"alt": "alt text 3"
},
{
"src": "https://picsum.photos/id/47/230/106",
"alt": "alt text 1"
},
{
"src": "https://picsum.photos/id/171/230/106",
"alt": "alt text 2"
},
{
"src": "https://picsum.photos/id/28/230/106",
"alt": "alt text 3"
},
{
"src": "https://picsum.photos/id/170/230/106",
"alt": "alt text 1"
},
{
"src": "https://picsum.photos/id/130/230/106",
"alt": "alt text 2"
},
{
"src": "https://picsum.photos/id/188/230/106",
"alt": "alt text 3"
},
{
"src": "https://picsum.photos/id/108/230/106",
"alt": "alt text 1"
},
{
"src": "https://picsum.photos/id/84/230/106",
"alt": "alt text 2"
},
{
"src": "https://picsum.photos/id/14/230/106",
"alt": "alt text 3"
}
]
}
.c-customer-logos__label {
color: useHSL(--primary-100);
@include font-scale(level-3, $font-secondary, bold);
}
.c-customer-logos__title {
color: useHSL(--primary-100);
@include font-scale(level-8, $font-primary, light);
margin-bottom: spacing(space-48);
}
// .c-customer-logos__list {
// display: grid;
// grid-template-columns: repeat(2, 1fr);
// grid-gap: $gutter * 2;
// @include min-screen(bp(large)) {
// grid-template-columns: repeat(4, 1fr);
// }
// @include min-screen(bp(xlarge)) {
// grid-template-columns: repeat(6, 1fr);
// }
// }
.c-customer-logos__list__item {
text-align: center;
}
No notes defined.