<div class="c-landscapebox u-grid u-p-base u-p-none@md">
<a href="/citta/roma/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/roma.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">roma</span>
</a>
<a href="/citta/milano/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/milano.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">milano</span>
</a>
<a href="/citta/torino/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/torino.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">torino</span>
</a>
<a href="/citta/bologna/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/bologna.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">bologna</span>
</a>
<a href="/citta/firenze/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/firenze.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">firenze</span>
</a>
<a href="/citta/napoli/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/napoli.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">napoli</span>
</a>
<a href="/citta/palermo/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/palermo.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">palermo</span>
</a>
<a href="/citta/bari/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/bari.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">bari</span>
</a>
<a href="/citta/venezia/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/venezia.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">venezia</span>
</a>
<a href="/citta/genova/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/genova.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">genova</span>
</a>
</div>
<div class="c-landscapebox u-grid u-p-base u-p-none@md">
{% for i in list %}
<a href="/citta/{{i.name}}/" class="c-landscapebox__item u-relative u-overflow-hidden u-flex u-items-center u-justify-center u-no-underline">
<img class="u-absolute u-left u-top u-z-base u-size-full-height u-size-full u-cover" src="/~shared/images/v7/cibo/img-citta/{{i.name}}.png" decoding="async" referrerpolicy="no-referrer" loading="lazy">
<span class="c-landscapebox__title u-capitalize u-z-cover u-px-small u-py-xsmall">{{i.name}}</span>
</a>
{% endfor %}
</div>
{
"list": [
{
"name": "roma"
},
{
"name": "milano"
},
{
"name": "torino"
},
{
"name": "bologna"
},
{
"name": "firenze"
},
{
"name": "napoli"
},
{
"name": "palermo"
},
{
"name": "bari"
},
{
"name": "venezia"
},
{
"name": "genova"
}
]
}
// Name: Landescapebox
// Description: Collection of hyperlinks with related images
//
// Component: `c-landscapebox`
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
.c-landscapebox {
--landscape-height: calc(90vh - 50px);
grid-template-columns: repeat(2,1fr);
height: var(--landscape-height);
transition: all 3s ease-in-out;
gap: $margin-small;
@include bp(md) {
--landscape-height: auto;
grid-template-columns: repeat(5,1fr);
}
&__item {
position: relative;
display: block;
background-color: var(--theme-color);
@include bp(md){
aspect-ratio: 16/9;
}
&:hover {
.c-landscapebox__title {
background-color: var(--theme-color);
transition: background-color .6s ease-in-out;
}
&::after {
background-color: transparent;
transition: background-color .6s ease-in-out;
}
}
&::after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
content: '';
width: 100%;
height: 100%;
background-color: rgba($ui-02, .4);
}
}
&__title {
background-color: transparent;
color: $inverse-01;
@include type(heading-02);
}
}
This component shows a collection of hyperlinks with related images
In order to display a landscapebox component use following syntax:
{% render "@landscapebox" %}