<section class="c-events">
<div class="o-layer o-layer--large">
<div class="o-retain o-retain--inset">
<ul class="o-mesh o-mesh--flow o-mesh--flow-fit o-mesh--flow-fit-large o-mesh--gap-2px">
<li>
<article class="c-events__item t-themed-section t-bg--page-theme o-clickable">
<div class="o-flow">
<div class="o-layout o-layout--fit o-layout--justify o-layout--nowrap o-layout--gap-base">
<h2 class="u-heading--labelled">
<a href="#">Open dag <br>bij vestiging Den Bosch</a>
</h2>
<svg class="c-icon c-icon--large" aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-arrow-right" />
</svg>
</div>
<dl class="o-layout o-layout--gap-base o-layout--fit">
<div title="datum" class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center">
<dt>
<span class="u-visually-hidden">datum</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-calendar" />
</svg>
</dt>
<dd>
<time datetime="2022-06-01">1 juni 2022</time>
</dd>
</div>
<div title="tijd" class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center">
<dt>
<span class="u-visually-hidden">tijd</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-clock" />
</svg>
</dt>
<dd>
<time datetime="18:00">18:00</time>
–
<time datetime="20:00">20:00</time>
</dd>
</div>
</dl>
</div>
</article>
</li>
<li>
<article class="c-events__item t-themed-section t-bg--page-theme o-clickable">
<div class="o-flow">
<div class="o-layout o-layout--fit o-layout--justify o-layout--nowrap o-layout--gap-base">
<h2 class="u-heading--labelled">
<a href="#">Open dag <br> Venlo</a>
</h2>
<svg class="c-icon c-icon--large" aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-arrow-right" />
</svg>
</div>
<dl class="o-layout o-layout--gap-base o-layout--fit">
<div title="datum" class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center">
<dt>
<span class="u-visually-hidden">datum</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-calendar" />
</svg>
</dt>
<dd>
<time datetime="2022-06-01">1 juni 2022</time>
</dd>
</div>
<div title="tijd" class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center">
<dt>
<span class="u-visually-hidden">tijd</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-clock" />
</svg>
</dt>
<dd>
<time datetime="18:00">18:00</time>
–
<time datetime="20:00">20:00</time>
</dd>
</div>
</dl>
</div>
</article>
</li>
</ul>
</div>
</div>
</section>
<section class="c-events">
<div class="o-layer o-layer--large">
<div class="o-retain o-retain--inset">
<ul class="o-mesh o-mesh--flow o-mesh--flow-fit o-mesh--flow-fit-large o-mesh--gap-2px">
{{# each items }}
<li>
<article class="c-events__item t-themed-section t-bg--page-theme o-clickable">
<div class="o-flow">
<div class="o-layout o-layout--fit o-layout--justify o-layout--nowrap o-layout--gap-base">
<h2 class="u-heading--labelled">
<a href="#">{{{ heading }}}</a>
</h2>
{{> '@atoms-icon' icon='arrow-right' size='large' }}
</div>
<dl class="o-layout o-layout--gap-base o-layout--fit">
{{#each properties }}
<div
title="{{ label }}"
class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center"
>
<dt>
<span class="u-visually-hidden">{{ label }}</span>
{{> '@atoms-icon' icon=icon }}
</dt>
<dd>
{{#if (eq type 'date') }}
<time datetime="{{ datetime }}">{{ date }}</time>
{{/if}}
{{#if (eq type 'time') }}
<time datetime="{{ timeStart }}">{{ timeStart }}</time>
–
<time
datetime="{{ timeEnd }}">{{ timeEnd }}</time>
{{/if}}
</dd>
</div>
{{/each}}
</dl>
</div>
</article>
</li>
{{/ each }}
</ul>
</div>
</div>
</section>
{
"items": [
{
"heading": "Open dag <br>bij vestiging Den Bosch",
"properties": [
{
"label": "datum",
"icon": "calendar",
"type": "date",
"datetime": "2022-06-01",
"date": "1 juni 2022"
},
{
"label": "tijd",
"icon": "clock",
"type": "time",
"timeStart": "18:00",
"timeEnd": "20:00"
}
]
},
{
"heading": "Open dag <br> Venlo",
"properties": [
{
"label": "datum",
"icon": "calendar",
"type": "date",
"datetime": "2022-06-01",
"date": "1 juni 2022"
},
{
"label": "tijd",
"icon": "clock",
"type": "time",
"timeStart": "18:00",
"timeEnd": "20:00"
}
]
}
]
}
/* =========================================================================
Components.Events
========================================================================= */
@use 'node_modules/@supple-kit/supple-css/tools/responsive';
@use 'node_modules/@supple-kit/supple-css/tools/space';
@use 'src/_sass/vars';
/* Block
========================================================================= */
.c-events {
// empty for reference
}
/* Elements
========================================================================= */
.c-events__item {
--padding:
#{responsive.lock(space.get-factor('small') * vars.$baseline,
space.get-factor('large') * vars.$baseline, palm-large, desk)};
block-size: 100%;
padding-inline: var(--padding);
padding-block: var(--padding);
}
No notes defined.