<article class="Past-event-listing grid grid--of-two">
<figure class="Past-event-listing__figure">
<img src="https://via.placeholder.com/600" alt="alt" loading="lazy" />
</figure>
<div class="Past-event-listing__content flow--m">
<img src="https://via.placeholder.com/50" alt="alt" />
<div class="flow--2xs">
<h2 class="h h-4">
dConstruct
</h2>
<div class="body text-grey flow">
<p><a href="https://2022.dconstruct.org/">dConstruct</a> is a one-day gathering of super-smart Earth people who will provoke, entertain and stimulate you with their thoughts on design transformation.</p>
</div>
</div>
<ul class="Past-event-listing__links">
<li>
<a class="link" href="#">2017</a>
</li>
<li>
<a class="link" href="#">2018</a>
</li>
<li>
<a class="link" href="#">2019</a>
</li>
</ul>
</div>
</article>
<article class="Past-event-listing grid grid--of-two">
<figure class="Past-event-listing__figure">
{% if url is defined %}
<a href="{{ url }}">
{% endif %}
{% if thumbnail is defined and thumbnail.src is defined %}
<img src="{{ thumbnail.src }}" alt="{{ thumbnail.alt }}" loading="lazy" />
{% endif %}
{% if url is defined %}
</a>
{% endif %}
</figure>
<div class="Past-event-listing__content flow--m">
{% if logo is defined and logo.src is defined %}
<img src="{{ logo.src }}" alt="{{ logo.alt }}" />
{% endif %}
<div class="flow--2xs">
<h2 class="h h-4">
{{ title }}
</h2>
<div class="body text-grey flow">
{{ description|raw }}
</div>
</div>
{% if (links|length) > 0 %}
<ul class="Past-event-listing__links">
{% for link in links %}
<li>
<a class="link" href="{{ link.link }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</article>
{
"logo": {
"src": "https://via.placeholder.com/50",
"alt": "alt"
},
"thumbnail": {
"src": "https://via.placeholder.com/600",
"alt": "alt"
},
"links": [
{
"text": "2017",
"link": "#"
},
{
"text": "2018",
"link": "#"
},
{
"text": "2019",
"link": "#"
}
],
"title": "dConstruct",
"description": "<p><a href=\"https://2022.dconstruct.org/\">dConstruct</a> is a one-day gathering of super-smart Earth people who will provoke, entertain and stimulate you with their thoughts on design transformation.</p>"
}
.Past-event-listing {
&__figure {
aspect-ratio: 16 / 9;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__content {
border-bottom: 1px solid var(--light-grey-step--1);
padding-bottom: var(--gutter);
}
&__links {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
list-style: none;
}
}
@media screen and (min-width: 50rem) {
.Past-event-listing {
&__content {
border-top: 1px solid var(--light-grey-step--1);
border-bottom: 0;
padding: var(--gutter) 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
&__figure {
aspect-ratio: 1/1;
}
}
}
No notes defined.