Use the programme component on detail pages to present the programme of a current event.
Do not use the programme component to present a series of milestones or events in a certain period of time in the past or in the future. Do not use the programme component when there are milestones or events that lead to a certain end result or a specific end goal. In these cases, use the timeline component instead.
Do not use the programme component on overview pages or filter pages. Only use the programme component on detail pages.
A programme is divided in slots using an HTML description list. The terms of the description list represent the names of the slots in the programme.
A slot is typically:
For each slot, the correspondig term there is one description linked with the corresponding term. This description contains the events that take place in that particular slot.
The events that take place in a particular slot are shown using a collection of teasers, shown in a grid of maximum 3 columns. For the teasers, the inverted styling is used.
Each teaser represents an event that takes place in a slot and can consist of the following elements:
When clicking the link of the teaser, a modal opens containing all information regarding the event:
When an image gallery is included, the image gallery shows one, two or three thumbnails depending on the device’s screen resolution. When there are more images available in an image gallery than can be shown on a certain screen resolution, the last thumbnail shows that there are more images with an action to open all images.
<div class="programme-wrapper">
<h2 class="visually-hidden">Programme</h2>
<div class="programme highlight highlight--top">
<dl class="highlight__inner">
{% for slotKey, slot in slots %}
<div class="programme-slot">
<dt class="programme-slot-title">{{ slot.title }}</dt>
<dd>
{% for itemKey, item in slot.items %}
{% set key = slotKey ~ itemKey %}
{% set modalContent %}
<h4>{{ slot.title }}</h4>
{% if item.subtitle %}
<p>{{ item.subtitle }}</p>
{% endif %}
{% if item.images|length > 1 %}
{% include '@image-gallery--multiple' with {
type: 'secondary',
items: item.images
} %}
{% elseif item.images|length > 0 %}
{% include '@image-gallery' with {
type: 'secondary',
src: item.images|first.src,
alt: item.images|first.alt,
caption: item.images|first.caption
} %}
{% endif %}
{% if item.description %}
{% include '@paragraph' with {
'text': item.description
} %}
{% endif %}
{% if item.video %}
{% include '@video' with item.video %}
{% endif %}
{% endset %}
<!-- Modal -->
{% include "@modal" with {
id: key,
title: item.title,
content: modalContent,
classes: 'programme-detail'
} %}
{% endfor %}
<!-- /Modal -->
<ul class="grid-3">
{% for itemKey, item in slot.items %}
{% set key = slotKey ~ itemKey %}
<!-- Teaser -->
{% include '@teaser' with {
modifier: 'teaser--inverted',
teaser_uid: 'uid_' ~ key,
paragraph_text: item.subtitle,
title: item.title,
link_text: 'More information',
link: '#' ~ key,
image_src: item.images|first.src,
image_alt_text: item.images|first.alt,
image_ratio: '8:5',
image_placeholders: true,
published_date: null
} %}
<!-- /Teaser -->
{% endfor %}
</ul>
</dd>
</div>
{% endfor %}
</dl>
</div>
</div>
<div class="programme-wrapper">
<h2 class="visually-hidden">Programme</h2>
<div class="programme highlight highlight--top">
<dl class="highlight__inner">
<div class="programme-slot">
<dt class="programme-slot-title">Vrijdag 19 augustus 2018</dt>
<dd>
<!-- Modal -->
<div id="00" class="modal programme-detail" role="dialog" aria-modal="true" aria-labelledby="00-title" tabindex="-1">
<div class="modal-inner">
<div class="modal-header">
<button type="button" class="button close icon-cross modal-close" data-target="00">
<span>Close</span>
</button>
</div>
<div class="modal-content">
<h3 id="00-title">General article title text</h3>
<h4>Vrijdag 19 augustus 2018</h4>
<p>Ongoing animation</p>
<div class="image-gallery--wrapper multiple image-gallery--secondary">
<ul class="image-gallery js-lightbox">
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li class="image-gallery__show-more">
<div class="show-more__content">
<span class="show-more__total">3</span>
<span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
</div>
</li>
</ul>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec. Cras aliquam interdum felis, nec efficitur quam varius sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec gravida tellus, quis pulvinar enim. Proin ut lectus dui. Pellentesque maximus orci quis aliquet bibendum. Fusce vestibulum velit a tellus fermentum, in laoreet est pharetra.</p>
<div class="video">
<div class="responsive-video">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="audio-description">
<a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
Watch this video with audio description </a>
</div>
</div>
</div>
</div>
<div class="modal-overlay modal-close" data-target="00" tabindex="-1"></div>
</div>
<!-- Modal -->
<div id="01" class="modal programme-detail" role="dialog" aria-modal="true" aria-labelledby="01-title" tabindex="-1">
<div class="modal-inner">
<div class="modal-header">
<button type="button" class="button close icon-cross modal-close" data-target="01">
<span>Close</span>
</button>
</div>
<div class="modal-content">
<h3 id="01-title">Lorem ipsum dolor sit amet bacon ipsum is fun</h3>
<h4>Vrijdag 19 augustus 2018</h4>
<p>Ongoing animation</p>
<div class="image-gallery--wrapper single image-gallery--secondary">
<div class="image-gallery js-lightbox">
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
<div class="video">
<div class="responsive-video">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="audio-description">
<a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
Watch this video with audio description </a>
</div>
</div>
</div>
</div>
<div class="modal-overlay modal-close" data-target="01" tabindex="-1"></div>
</div>
<!-- Modal -->
<div id="02" class="modal programme-detail" role="dialog" aria-modal="true" aria-labelledby="02-title" tabindex="-1">
<div class="modal-inner">
<div class="modal-header">
<button type="button" class="button close icon-cross modal-close" data-target="02">
<span>Close</span>
</button>
</div>
<div class="modal-content">
<h3 id="02-title">General article title text</h3>
<h4>Vrijdag 19 augustus 2018</h4>
<p>Ongoing animation</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec. Cras aliquam interdum felis, nec efficitur quam varius sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec gravida tellus, quis pulvinar enim. Proin ut lectus dui. Pellentesque maximus orci quis aliquet bibendum. Fusce vestibulum velit a tellus fermentum, in laoreet est pharetra.</p>
</div>
</div>
<div class="modal-overlay modal-close" data-target="02" tabindex="-1"></div>
</div>
<!-- Modal -->
<div id="03" class="modal programme-detail" role="dialog" aria-modal="true" aria-labelledby="03-title" tabindex="-1">
<div class="modal-inner">
<div class="modal-header">
<button type="button" class="button close icon-cross modal-close" data-target="03">
<span>Close</span>
</button>
</div>
<div class="modal-content">
<h3 id="03-title">Lorem ipsum dolor sit amet</h3>
<h4>Vrijdag 19 augustus 2018</h4>
<div class="image-gallery--wrapper single image-gallery--secondary">
<div class="image-gallery js-lightbox">
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</div>
<div class="modal-overlay modal-close" data-target="03" tabindex="-1"></div>
</div>
<!-- /Modal -->
<ul class="grid-3">
<!-- Teaser -->
<li class="teaser teaser--inverted ">
<article class="teaser-content">
<div class="content__second">
<h3>General article title text</h3>
<p class="teaser--inverted">Ongoing animation</p>
<a href='#00' class="read-more standalone-link" title="General article title text">
Read more <span class="visually-hidden">
about General article title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure class="teaser--inverted">
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" class="teaser--inverted" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#00" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">General article title text</a>
</li>
<!-- /Teaser -->
<!-- Teaser -->
<li class="teaser teaser--inverted ">
<article class="teaser-content">
<div class="content__second">
<h3>Lorem ipsum dolor sit amet bacon ipsum is fun</h3>
<p class="teaser--inverted">Ongoing animation</p>
<a href='#01' class="read-more standalone-link" title="Lorem ipsum dolor sit amet bacon ipsum is fun">
Read more <span class="visually-hidden">
about Lorem ipsum dolor sit amet bacon ipsum is fun
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure class="teaser--inverted">
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" class="teaser--inverted" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#01" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Lorem ipsum dolor sit amet bacon ipsum is fun</a>
</li>
<!-- /Teaser -->
<!-- Teaser -->
<li class="teaser teaser--inverted ">
<article class="teaser-content">
<div class="content__second">
<h3>General article title text</h3>
<p class="teaser--inverted">Ongoing animation</p>
<a href='#02' class="read-more standalone-link" title="General article title text">
Read more <span class="visually-hidden">
about General article title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure class="teaser--inverted">
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#02" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">General article title text</a>
</li>
<!-- /Teaser -->
<!-- Teaser -->
<li class="teaser teaser--inverted ">
<article class="teaser-content">
<div class="content__second">
<h3>Lorem ipsum dolor sit amet</h3>
<a href='#03' class="read-more standalone-link" title="Lorem ipsum dolor sit amet">
Read more <span class="visually-hidden">
about Lorem ipsum dolor sit amet
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure class="teaser--inverted">
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" class="teaser--inverted" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#03" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Lorem ipsum dolor sit amet</a>
</li>
<!-- /Teaser -->
</ul>
</dd>
</div>
<div class="programme-slot">
<dt class="programme-slot-title">Zaterdag 20 augustus 2018</dt>
<dd>
<!-- Modal -->
<div id="10" class="modal programme-detail" role="dialog" aria-modal="true" aria-labelledby="10-title" tabindex="-1">
<div class="modal-inner">
<div class="modal-header">
<button type="button" class="button close icon-cross modal-close" data-target="10">
<span>Close</span>
</button>
</div>
<div class="modal-content">
<h3 id="10-title">General article title text</h3>
<h4>Zaterdag 20 augustus 2018</h4>
<p>Ongoing animation</p>
<div class="image-gallery--wrapper multiple image-gallery--secondary">
<ul class="image-gallery js-lightbox">
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li class="image-gallery__show-more">
<div class="show-more__content">
<span class="show-more__total">2</span>
<span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
</div>
</li>
</ul>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</div>
<div class="modal-overlay modal-close" data-target="10" tabindex="-1"></div>
</div>
<!-- Modal -->
<div id="11" class="modal programme-detail" role="dialog" aria-modal="true" aria-labelledby="11-title" tabindex="-1">
<div class="modal-inner">
<div class="modal-header">
<button type="button" class="button close icon-cross modal-close" data-target="11">
<span>Close</span>
</button>
</div>
<div class="modal-content">
<h3 id="11-title">General article title text</h3>
<h4>Zaterdag 20 augustus 2018</h4>
<p>Ongoing animation</p>
<div class="image-gallery--wrapper single image-gallery--secondary">
<div class="image-gallery js-lightbox">
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</div>
<div class="modal-overlay modal-close" data-target="11" tabindex="-1"></div>
</div>
<!-- /Modal -->
<ul class="grid-3">
<!-- Teaser -->
<li class="teaser teaser--inverted ">
<article class="teaser-content">
<div class="content__second">
<h3>General article title text</h3>
<p class="teaser--inverted">Ongoing animation</p>
<a href='#10' class="read-more standalone-link" title="General article title text">
Read more <span class="visually-hidden">
about General article title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure class="teaser--inverted">
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" class="teaser--inverted" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#10" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">General article title text</a>
</li>
<!-- /Teaser -->
<!-- Teaser -->
<li class="teaser teaser--inverted ">
<article class="teaser-content">
<div class="content__second">
<h3>General article title text</h3>
<p class="teaser--inverted">Ongoing animation</p>
<a href='#11' class="read-more standalone-link" title="General article title text">
Read more <span class="visually-hidden">
about General article title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure class="teaser--inverted">
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" class="teaser--inverted" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#11" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">General article title text</a>
</li>
<!-- /Teaser -->
</ul>
</dd>
</div>
</dl>
</div>
</div>
{
"slots": [
{
"title": "Vrijdag 19 augustus 2018",
"items": [
{
"title": "General article title text",
"subtitle": "Ongoing animation",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec. Cras aliquam interdum felis, nec efficitur quam varius sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec gravida tellus, quis pulvinar enim. Proin ut lectus dui. Pellentesque maximus orci quis aliquet bibendum. Fusce vestibulum velit a tellus fermentum, in laoreet est pharetra.",
"images": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
],
"video": {
"title": "Promofilm stad Gent.",
"src": "https://www.youtube.com/embed/S0vLmTWUmok",
"audio_description_src": "https://www.youtube.com/embed/S0vLmTWUmok"
}
},
{
"title": "Lorem ipsum dolor sit amet bacon ipsum is fun",
"subtitle": "Ongoing animation",
"images": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
],
"video": {
"title": "Promofilm stad Gent.",
"src": "https://www.youtube.com/embed/S0vLmTWUmok",
"audio_description_src": "https://www.youtube.com/embed/S0vLmTWUmok"
}
},
{
"title": "General article title text",
"subtitle": "Ongoing animation",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec. Cras aliquam interdum felis, nec efficitur quam varius sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec gravida tellus, quis pulvinar enim. Proin ut lectus dui. Pellentesque maximus orci quis aliquet bibendum. Fusce vestibulum velit a tellus fermentum, in laoreet est pharetra."
},
{
"title": "Lorem ipsum dolor sit amet",
"images": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
}
]
},
{
"title": "Zaterdag 20 augustus 2018",
"items": [
{
"title": "General article title text",
"subtitle": "Ongoing animation",
"images": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"caption": "image caption"
}
]
},
{
"title": "General article title text",
"subtitle": "Ongoing animation",
"images": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text"
}
]
}
]
}
]
}
.programme {
> .highlight__inner {
padding: 4.8rem 2rem 4rem;
&::before {
@include spot-image('calendar', 7rem);
@include tablet {
right: 0;
left: 0;
}
}
}
.image-wrapper {
background-color: color('cyan', -4);
}
.read-more {
font-size: .8rem;
line-height: normal;
}
///
/// Programme slot.
///
&-slot {
width: 100%;
max-width: $bp-max-content;
margin: 0 auto;
&-title {
margin: 0 auto 1.6rem;
font-size: 1.3rem;
text-align: center;
}
> dd {
max-width: none;
padding: 0;
}
& + & {
margin-top: 2.8rem;
}
}
///
/// Programme detail
///
&-detail {
h3 {
@extend %h2;
}
h4 {
@extend %h3;
margin-bottom: .4rem;
}
ul {
font-size: .8rem;
list-style: disc;
}
.image-gallery--wrapper {
margin: 1rem 0;
.show-more__content {
text-align: center;
}
@include desktop-and-below {
.image-gallery,
.gallery-link {
max-width: none;
}
.gallery-link {
width: 100%;
margin: 0;
}
}
}
.video {
margin-top: 1.6rem;
> .responsive-video {
width: calc(100% + 2rem);
margin-left: -1rem;
@include tablet {
width: 100%;
margin-left: 0;
}
}
}
}
}