<section class="a-footer-link-list">
<h2 class="a-footer-link-list__title">Kantonalparteien</h2>
<ul class="a-footer-link-list__list">
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Aargau</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Appenzell innerhoden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Appenzell ausserhoden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Bern</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Basel-Landschaft</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Basel-Stadt</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Freibourg</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Genf</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Glarus</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Graubünden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Jura</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Luzern</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Neuenburg</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Nidwalden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Obwalden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">St.Gallen</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Schaffhausen</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Solothurn</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Schwyz</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Thurgau</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Tessin</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Uri</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Waadt</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Wallis</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Zug</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Zürich</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Junge Grüne</a>
</li>
</ul>
</section>
<section class="a-footer-link-list">
<h2 class="a-footer-link-list__title">{{title}}</h2>
<ul class="a-footer-link-list__list">
{{#each links}}
<li class="a-footer-link-list__item">
<a href="{{this.url}}" class="a-footer-link-list__link">{{this.label}}</a>
</li>
{{/each}}
</ul>
</section>
.a-footer-link-list {
&__title {
margin-top: 0;
margin-bottom: 40px;
@include fluid-props(font-size, $size-tiny, $size-medium, 20px, 32px);
}
&__list {
font-size: 0.875rem;
display: grid;
grid-template-columns: repeat(2, calc(50% - 12px));
grid-column-gap: 24px;
width: calc(100vw - #{2*$grid-item-padding-min});
@include media($size-tiny) {
grid-template-columns: repeat(3, calc(33% - 16px));
}
@include media($_DESKTOP) {
width: 100%;
}
@include only_ie10_above {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
}
}
&__item {
@include clean-li;
width: 100%;
@include only_ie10_above {
width: 120px;
margin-right: 20px;
}
}
&__link {
@include clean-link;
line-height: 1.75em;
padding: 7px 0 8px;
display: block;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:after {
content: ' ';
width: 36px;
height: 1px;
background-color: $color-grey-2;
position: absolute;
bottom: 0;
left: 0;
transition: width $transition-fast $transition-ease;
}
@include hover {
&:after {
width: 69px;
background-color: $color-primary;
@include high-contrast {
background-color: $color-primary-dark;
}
}
}
}
}
{
"title": "Kantonalparteien",
"links": [
{
"url": "#",
"label": "Aargau"
},
{
"url": "#",
"label": "Appenzell innerhoden"
},
{
"url": "#",
"label": "Appenzell ausserhoden"
},
{
"url": "#",
"label": "Bern"
},
{
"url": "#",
"label": "Basel-Landschaft"
},
{
"url": "#",
"label": "Basel-Stadt"
},
{
"url": "#",
"label": "Freibourg"
},
{
"url": "#",
"label": "Genf"
},
{
"url": "#",
"label": "Glarus"
},
{
"url": "#",
"label": "Graubünden"
},
{
"url": "#",
"label": "Jura"
},
{
"url": "#",
"label": "Luzern"
},
{
"url": "#",
"label": "Neuenburg"
},
{
"url": "#",
"label": "Nidwalden"
},
{
"url": "#",
"label": "Obwalden"
},
{
"url": "#",
"label": "St.Gallen"
},
{
"url": "#",
"label": "Schaffhausen"
},
{
"url": "#",
"label": "Solothurn"
},
{
"url": "#",
"label": "Schwyz"
},
{
"url": "#",
"label": "Thurgau"
},
{
"url": "#",
"label": "Tessin"
},
{
"url": "#",
"label": "Uri"
},
{
"url": "#",
"label": "Waadt"
},
{
"url": "#",
"label": "Wallis"
},
{
"url": "#",
"label": "Zug"
},
{
"url": "#",
"label": "Zürich"
},
{
"url": "#",
"label": "Junge Grüne"
}
]
}
No notes defined.