Highlight

The highlight component is used for highlighting certain sections of the website. It contains a title, link and an optional image an label

Backbutton

px

			
				<section class="
		c-highlight
	">
	<div class="l-grid l-grid--default-spacing c-highlight__grid">
		<div class="
					l-grid__col:12/12
					l-grid__col:6/12@at:vp-9
					l-grid__col:4/12@at:vp-12
					l-grid__col--left-offset:1/12@at:vp-15
					c-highlight__content
				">
			<a class="c-link c-highlight__back c-link--secondary c-link--reverse" href="/">
				<span class="c-link__description">Alle artikelen</span>
				<span class="c-link__decoration" aria-hidden="true"></span>
			</a>
			<div class="c-label c-highlight__label">
				05.10.2019
				<div class="c-label__divider"></div>
				05.10.2019
			</div>
			<div class="c-highlight__title-wrapper">
				<h2 class="c-highlight__title c-highlight__title--underline">Madonna ont&shy;moet dulle griet</h2>
			</div>
			<p class="c-highlight__description">
				Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.
			</p>
		</div>
		<div class="
					l-grid__col:12/12
					l-grid__col:6/12@at:vp-9
					l-grid__col:8/12@at:vp-12
					l-grid__col:7/12@at:vp-15
					l-grid__col--order:-1@to:vp-9
					c-highlight__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');
				">
			<img class="u-visually-hidden u-idle" src="/assets/images/placeholders/placeholder1.jpg" alt="Schilderij Madonna" width="757" height="953">
		</div>
	</div>
</section>
			

		

Default

px

			
				<section class="
		c-highlight
	">
	<a href="#" class="l-grid l-grid--default-spacing c-highlight__grid">
		<div class="
					l-grid__col:12/12
					l-grid__col:6/12@at:vp-9
					l-grid__col:4/12@at:vp-12
					l-grid__col--left-offset:1/12@at:vp-15
					c-highlight__content
				">
			<div class="c-label c-highlight__label">
				05.10.2019
				<div class="c-label__divider"></div>
				05.10.2019
			</div>
			<div class="c-highlight__title-wrapper">
				<h2 class="c-highlight__title c-highlight__title--underline">Madonna ont&shy;moet dulle griet</h2>
			</div>
			<p class="c-highlight__description">
				Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.
			</p>
			<div class="c-link c-highlight__link" href="#">
				<span class="c-link__description">Lees meer</span>
				<span class="c-link__decoration" aria-hidden="true"></span>
			</div>
		</div>
		<div class="
					l-grid__col:12/12
					l-grid__col:6/12@at:vp-9
					l-grid__col:8/12@at:vp-12
					l-grid__col:7/12@at:vp-15
					l-grid__col--order:-1@to:vp-9
					c-highlight__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');
				">
			<img class="u-visually-hidden u-idle" src="/assets/images/placeholders/placeholder1.jpg" alt="Schilderij Madonna" width="757" height="953">
		</div>
	</a>
</section>
			

		

No image

px

			
				<section class="
		c-highlight
	">
	<div class="l-grid l-grid--default-spacing c-highlight__grid">
		<div class="l-grid__col:12/12 l-grid__col:7/12@at:vp-9">
			<div class="c-label c-highlight__label">
				05.10.2019
				<div class="c-label__divider"></div>
				05.10.2019
			</div>
			<div class="c-highlight__title-wrapper">
				<h2 class="c-highlight__title c-highlight__title--underline">Madonna ontmoet dulle griet</h2>
			</div>
		</div>
	</div>
</section>
			

		

Reversed

px

			
				<section class="
		c-highlight
		c-highlight--reversed
	">
	<a href="#" class="l-grid l-grid--default-spacing c-highlight__grid">
		<div class="
					l-grid__col:12/12
					l-grid__col:6/12@at:vp-9
					l-grid__col:4/12@at:vp-12
					l-grid__col--right-offset:1/12@at:vp-15
					c-highlight__content
				">
			<div class="c-label c-highlight__label">
				05.10.2019
				<div class="c-label__divider"></div>
				05.10.2019
			</div>
			<div class="c-highlight__title-wrapper">
				<h2 class="c-highlight__title c-highlight__title--underline">Madonna ontmoet dulle griet</h2>
			</div>
			<p class="c-highlight__description">
				Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.
			</p>
			<div class="c-link c-highlight__link c-link--alternate" href="#">
				<span class="c-link__description">Lees meer</span>
				<span class="c-link__decoration" aria-hidden="true"></span>
			</div>
		</div>
		<div class="
					l-grid__col:12/12
					l-grid__col:6/12@at:vp-9
					l-grid__col:8/12@at:vp-12
					l-grid__col:7/12@at:vp-15
					l-grid__col--order:-1@to:vp-9
					c-highlight__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');
				">
			<img class="u-visually-hidden u-idle" src="/assets/images/placeholders/placeholder1.jpg" alt="Schilderij Madonna" width="757" height="953">
		</div>
	</a>
</section>
			

		

Documentation

Modifiers

  • c-highlight--reversed

    Switches the order of image and content.