Session

Session card component to display the available dates of a course. This component uses Glide.js to have the carousel behavior.

Default

This carousel is made with the glide.js library. In order to not use this slicing and functionality, remove all the classes that start with glide-.... The s-glide-session is used to override the glide default styling.

px 

			
				<div class="m-session ">
	<article class="m-session__card js-session glide s-glide-session">
		<header class="m-session__header">
			<h4 class="m-session__title">Maak je keuze</h4>
			<div class="m-session__bullets glide__bullets" data-glide-el="controls[nav]">
				<button class="m-session__bullet glide__bullet" data-glide-dir="=0"></button>
				<button class="m-session__bullet glide__bullet" data-glide-dir="=1"></button>
				<button class="m-session__bullet glide__bullet" data-glide-dir="=2"></button>
			</div>
		</header>
		<div class="m-session__content">
			<div class="m-session__content-container glide__track" data-glide-el="track">
				<ul class="m-session__slides glide__slides">
					<li class="m-session__slide glide__slide ">
						<div class="m-session__slide-container s-rte-session">
							<ul>
								<li>Ma 18 feb 10:00 – 17:00</li>
								<li>Di 19 feb 10:00 – 17:00</li>
								<li>Wo 20 feb 10:00 – 13:00</li>
								<li>Do 21 feb 10:00 - 17:00</li>
								<li>Ma 25 ma 13:00 – 17:00</li>
							</ul>
						</div>
						<ul class="m-session__attributes">
							<li class="m-session__attribute">
								<div class="a-attribute a-attribute--error">
									<span class="a-attribute__icon a-attribute__icon--before icon-error"></span>
									<p class="a-attribute__text">nog 2 pl.</p>
								</div>
							</li>
							<li class="m-session__attribute">
								<div class="a-attribute a-attribute--location">
									<span class="a-attribute__icon a-attribute__icon--before icon-location"></span>
									<p class="a-attribute__text">Hasselt, Limburg</p>
								</div>
							</li>
						</ul>
					</li>
					<li class="m-session__slide glide__slide ">
						<div class="m-session__slide-container s-rte-session">
							<h4>23 Feb 10:00 - 17:00</h4>
						</div>
						<ul class="m-session__attributes">
							<li class="m-session__attribute">
								<div class="a-attribute a-attribute--location">
									<span class="a-attribute__icon a-attribute__icon--before icon-location"></span>
									<p class="a-attribute__text">Berchem, Antwerpen</p>
								</div>
							</li>
						</ul>
					</li>
					<li class="m-session__slide glide__slide m-session__slide--white">
						<div class="m-session__slide-container s-rte-session">
							<p>
								U zag de <strong>5 eerstvolgende sessies</strong> voor deze opleiding.
								<a href=''>Bekijk de overige sessies</a> onderaan de pagina
							</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="m-session__arrows glide__arrows" data-glide-el="controls">
				<button class="m-session__arrow m-session__arrow--left glide__arrow" data-glide-dir="<"></button>
				<button class="m-session__arrow m-session__arrow--right glide__arrow" data-glide-dir=">"></button>
			</div>
		</div>
		<footer class="m-session__footer">
			<a class="a-link m-session__link a-link--decorated " href="#session-table">
				<span class="a-link__text">Alle locaties &amp; data voor deze opleiding</span>
			</a>
			<a class="a-button m-session__button" href="">
				<span class="a-button__text">Schrijf je in voor deze sessie</span>
			</a>
		</footer>
	</article>
	<a class="a-link m-session__meta a-link--light " href="#">
		<span class="a-link__text">Inschrijvingsvoorwaarden</span>
	</a>
</div>

Fallback

When no sessions are available, a fallback text is rendered informing the user that no session are planned at this moment.

px 

			
				<div class="m-session ">
	<article class="m-session__card">
		<header class="m-session__header">
			<h4 class="m-session__title">Maak je keuze</h4>
		</header>
		<div class="m-session__content m-session__content--fallback">
			<p class="m-session__fallback">Er zijn momenteel geen sessies gepland</p>
		</div>
		<footer class="m-session__footer">
			<a class="a-button m-session__button" href="">
				<span class="a-button__text">Hou me op de hoogte</span>
			</a>
		</footer>
	</article>
</div>

Documentation

Modifiers

  • m-session__content--fallback

    When no session can be rendered the content should show a fallback message. With this modifier-class the content is in the middle of its container.

  • m-session__slide--white

    Gives one of the slides a white background instead of the default grey one

  • m-session__arrow--left

    Used to add the correct styling to the arrow on the left side of the carousel

  • m-session__arrow--right

    Used to add the correct styling to the arrow on the right side of the carousel