Use the resolutions component to help users enter resolution details.
Do not use the resolutions component for other uses than letting users enter resolution details.
<div class="resolutions-list">
{% set content %}
{% include '@heading' with {
'type': 'h2',
'heading_text': title
} %}
<ul class="resolutions-list__items">
{% for i in 0..2 %}
<li>
<div class="resolutions-detail">
<h3 class="resolutions-detail__title">
{% include '@link' with {
'link': item.link,
'text': item.title,
'modifier': 'resolutions-detail__link',
'title': null
} %}
</h3>
<dl class="resolutions-detail__list">
<dt>{{ item.organ.label }}:</dt>
<dd>{{ item.organ.value }}</dd>
<dt>{{ item.date.label }}:</dt>
<dd>{{ item.date.value }}</dd>
</dl>
<span class="resolutions-detail__status resolutions-detail__status--{{ item.status }}" >{{ item.label }}</span>
</div>
</li>
{% endfor %}
</ul>
{% include '@link' with {
'link': cta.link,
'text': cta.text,
'modifier': 'button button-primary',
'title': null
} %}
{% endset %}
{% include "@highlight" with {
content: content,
modifier: 'top',
classes: ['hammer']
} %}
</div>
<div class="resolutions-list">
<section class="highlight hammer highlight--top">
<div class="highlight__inner">
<h2>Recent resolutions</h2>
<ul class="resolutions-list__items">
<li>
<div class="resolutions-detail">
<h3 class="resolutions-detail__title">
<a href='https://ebesluitvorming.gent.be/' class="resolutions-detail__link">
Lorem ipsum dolor sit amet consectetur adipisicing elit </a>
</h3>
<dl class="resolutions-detail__list">
<dt>Organ:</dt>
<dd>Lorem ipsum</dd>
<dt>Date:</dt>
<dd>DD/MM/YYYY</dd>
</dl>
<span class="resolutions-detail__status resolutions-detail__status--true">Approved</span>
</div>
</li>
<li>
<div class="resolutions-detail">
<h3 class="resolutions-detail__title">
<a href='https://ebesluitvorming.gent.be/' class="resolutions-detail__link">
Lorem ipsum dolor sit amet consectetur adipisicing elit </a>
</h3>
<dl class="resolutions-detail__list">
<dt>Organ:</dt>
<dd>Lorem ipsum</dd>
<dt>Date:</dt>
<dd>DD/MM/YYYY</dd>
</dl>
<span class="resolutions-detail__status resolutions-detail__status--true">Approved</span>
</div>
</li>
<li>
<div class="resolutions-detail">
<h3 class="resolutions-detail__title">
<a href='https://ebesluitvorming.gent.be/' class="resolutions-detail__link">
Lorem ipsum dolor sit amet consectetur adipisicing elit </a>
</h3>
<dl class="resolutions-detail__list">
<dt>Organ:</dt>
<dd>Lorem ipsum</dd>
<dt>Date:</dt>
<dd>DD/MM/YYYY</dd>
</dl>
<span class="resolutions-detail__status resolutions-detail__status--true">Approved</span>
</div>
</li>
</ul>
<a href='#' class="button button-primary">
All city of Ghent resolutions </a>
</div>
</section>
</div>
{
"title": "Recent resolutions",
"item": {
"title": "Lorem ipsum dolor sit amet consectetur adipisicing elit",
"link": "https://ebesluitvorming.gent.be/",
"status": "true",
"label": "Approved",
"organ": {
"label": "Organ",
"value": "Lorem ipsum"
},
"date": {
"label": "Date",
"value": "DD/MM/YYYY"
}
},
"cta": {
"text": "All city of Ghent resolutions",
"link": "#"
}
}
// sass-lint:disable placeholder-in-extend
.resolutions-detail {
display: grid;
position: relative;
margin: 0 0 .8rem;
padding: .8rem 1rem;
border-radius: .375rem;
background-color: #fff;
line-height: 1.75;
grid-template-columns: 1fr;
grid-auto-rows: auto;
grid-column-gap: 1rem;
@include tablet {
grid-template-columns: 1fr minmax(auto, 6rem);
}
&__title {
margin-bottom: .2rem;
font-size: .9rem;
grid-row: 1;
}
&__link {
border: 0;
&::before {
position: absolute;
content: '';
z-index: 1;
inset: 0;
}
}
&__list {
margin: 0;
font-size: .6rem;
dt {
display: inline-block;
position: relative;
font-weight: 600;
}
dd {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
dt ~ dd:not(:last-of-type) {
margin-inline-end: .7em;
&::after {
position: absolute;
top: .2rem;
right: -.5em;
bottom: .2rem;
border-right: thin solid currentColor;
content: "";
}
}
}
&__status {
display: inline-block;
position: relative;
margin-top: .6rem;
padding: .4em .8em .6em;
border: 1px solid transparent;
border-radius: .2rem;
font-size: .6rem;
line-height: 1.1;
justify-self: start;
@include tablet {
align-self: start;
margin: 0;
justify-self: end;
grid-row: 1;
grid-column: 2 / -1;
}
&::before {
display: inline-block;
margin-right: .3em;
transform: translateY(.1rem);
}
&--true {
@extend .icon-checkmark-circle;
background-color: color('green', -4);
color: color('green', +2);
}
&--false {
@extend .icon-cross;
background-color: color('red', -4);
color: color('red', +2);
}
}
}
// sass-lint:disable no-important
.resolutions-list {
.highlight__inner {
padding-right: 2rem !important;
}
h2 {
@include tablet {
max-width: calc(100% - 8rem);
}
}
.button {
align-self: start;
}
&__items {
@extend %list-no-style;
margin-block: 1rem;
}
}