Exhibitions

The exhibition component has a complex layout. When it has 3 items, all items are displayed full width. When it has 4 or more items, it depends on if it's even or odd. When it's even, the 2 first items will be displayed full width, the 2 others will be splitted. When it's odd, the first item will be displayed full width, the others will be displayed splitted.

4

px 

			
				<div class="c-exhibitions ">
	<div class="l-grid l-grid--default-spacing l-grid--row-spacing:5 l-grid--column-spacing:5">
		<section class="c-hero l-grid__col:12/12">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h2 class="c-hero__title">Madonna ontmoet dulle griet</h2>
				</div>
			</a>
		</section>
		<section class="c-hero l-grid__col:12/12">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h3 class="c-hero__title">Madonna ontmoet dulle griet</h3>
				</div>
			</a>
		</section>
		<section class="c-hero c-hero--small l-grid__col:12/12 l-grid__col:6/12@at:vp-7">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h3 class="c-hero__title">Madonna ontmoet dulle griet</h3>
				</div>
			</a>
		</section>
		<section class="c-hero c-hero--small l-grid__col:12/12 l-grid__col:6/12@at:vp-7">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h3 class="c-hero__title">Madonna ontmoet dulle griet</h3>
				</div>
			</a>
		</section>
	</div>
</div>

5

px 

			
				<div class="c-exhibitions ">
	<div class="l-grid l-grid--default-spacing l-grid--row-spacing:5 l-grid--column-spacing:5">
		<section class="c-hero l-grid__col:12/12">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h2 class="c-hero__title">Madonna ontmoet dulle griet</h2>
				</div>
			</a>
		</section>
		<section class="c-hero c-hero--small l-grid__col:12/12 l-grid__col:6/12@at:vp-7">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h3 class="c-hero__title">Madonna ontmoet dulle griet</h3>
				</div>
			</a>
		</section>
		<section class="c-hero c-hero--small l-grid__col:12/12 l-grid__col:6/12@at:vp-7">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h3 class="c-hero__title">Madonna ontmoet dulle griet</h3>
				</div>
			</a>
		</section>
		<section class="c-hero c-hero--small l-grid__col:12/12 l-grid__col:6/12@at:vp-7">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h3 class="c-hero__title">Madonna ontmoet dulle griet</h3>
				</div>
			</a>
		</section>
		<section class="c-hero c-hero--small l-grid__col:12/12 l-grid__col:6/12@at:vp-7">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h3 class="c-hero__title">Madonna ontmoet dulle griet</h3>
				</div>
			</a>
		</section>
	</div>
</div>

Default

px 

			
				<div class="c-exhibitions ">
	<div class="l-grid l-grid--default-spacing l-grid--row-spacing:5 l-grid--column-spacing:5">
		<section class="c-hero l-grid__col:12/12">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h2 class="c-hero__title">Madonna ontmoet dulle griet</h2>
				</div>
			</a>
		</section>
		<section class="c-hero l-grid__col:12/12">
			<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
				<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
					<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
				</div>
				<div class="c-hero__content">
					<div class="c-hero__label-wrapper">
						<div class="c-label c-hero__label">
							05.10.2019
							<div class="c-label__divider"></div>
							05.10.2019
						</div>
					</div>
					<h3 class="c-hero__title">Madonna ontmoet dulle griet</h3>
				</div>
			</a>
		</section>
	</div>
</div>