Article

The article component is used for providing links to articles. They are little blocks that can either be positioned next to or under eachother.

Default

px

			
				<a class="
		c-article
		" href="#
	">
	<div class="c-article__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
		<img class="u-visually-hidden u-idle" src="/assets/images/placeholders/placeholder1.jpg" width="757" height="953" alt="Schilderij het doopsel van Christurs van Peter Paul Rubens" />
	</div>
	<div class="c-article__content">
		<div class="c-article__label">
			<div class="c-label c-label--small">
				Restauratie
			</div>
		</div>
		<div class="c-article__title-wrapper">
			<h3 class="c-article__title">Madonna ontmoet Dulle Griet nogmaals</h3>
		</div>
		<span class="c-article__decoration" aria-hidden="true"></span>
	</div>
</a>
<div class="
		c-article
		" ">
		<div class=" c-article__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
	<img class="u-visually-hidden u-idle" src="/assets/images/placeholders/placeholder1.jpg" width="757" height="953" alt="Schilderij het doopsel van Christurs van Peter Paul Rubens" />
</div>
<div class="c-article__content">
	<div class="c-article__label">
		<div class="c-label c-label--small">
			Restauratie
		</div>
	</div>
	<div class="c-article__title-wrapper">
		<h3 class="c-article__title">Madonna ontmoet Dulle Griet nogmaals</h3>
	</div>
	<div class="c-article__links">
		<a class="c-link c-link--quinary" href="#">
			<span class="c-link__description">Koop tickets</span>
			<span class="c-link__decoration" aria-hidden="true"></span>
			<div class="c-icon c-link__icon">
				<?xml version="1.0" encoding="utf-8"?>
				<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
					<style type="text/css">
						.st0 {
							fill-rule: evenodd;
							clip-rule: evenodd;
						}
					</style>
					<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
				</svg>
			</div>
		</a>
		<a class="c-link c-link--quinary" href="#">
			<span class="c-link__description">Meer info</span>
			<span class="c-link__decoration" aria-hidden="true"></span>
			<div class="c-icon c-link__icon">
				<?xml version="1.0" encoding="utf-8"?>
				<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
					<style type="text/css">
						.st0 {
							fill-rule: evenodd;
							clip-rule: evenodd;
						}
					</style>
					<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
				</svg>
			</div>
		</a>
	</div>
</div>
</div>
			

		

Horizontal

px

			
				<div class="
		c-article
		c-article--horizontal" ">
		<div class=" c-article__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
	<img class="u-visually-hidden u-idle" src="/assets/images/placeholders/placeholder1.jpg" width="757" height="953" alt="Schilderij het doopsel van Christurs van Peter Paul Rubens" />
</div>
<div class="c-article__content">
	<div class="c-article__title-wrapper">
		<h3 class="c-article__title">Madonna ontmoet Dulle Griet nogmaals</h3>
	</div>
	<div class="c-article__links">
		<a class="c-link c-link--quinary" href="#">
			<span class="c-link__description">Koop tickets</span>
			<span class="c-link__decoration" aria-hidden="true"></span>
			<div class="c-icon c-link__icon">
				<?xml version="1.0" encoding="utf-8"?>
				<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
					<style type="text/css">
						.st0 {
							fill-rule: evenodd;
							clip-rule: evenodd;
						}
					</style>
					<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
				</svg>
			</div>
		</a>
		<a class="c-link c-link--quinary" href="#">
			<span class="c-link__description">Meer info</span>
			<span class="c-link__decoration" aria-hidden="true"></span>
			<div class="c-icon c-link__icon">
				<?xml version="1.0" encoding="utf-8"?>
				<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
					<style type="text/css">
						.st0 {
							fill-rule: evenodd;
							clip-rule: evenodd;
						}
					</style>
					<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
				</svg>
			</div>
		</a>
	</div>
</div>
</div>
			

		

Vertical

px

			
				<a class="
		c-article
		c-article--vertical
		" href="#
	">
	<div class="c-article__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
		<img class="u-visually-hidden u-idle" src="/assets/images/placeholders/placeholder1.jpg" width="757" height="953" alt="Schilderij het doopsel van Christurs van Peter Paul Rubens" />
	</div>
	<div class="c-article__content">
		<div class="c-article__label">
			<div class="c-label c-label--small">
				Restauratie
			</div>
		</div>
		<div class="c-article__title-wrapper">
			<h3 class="c-article__title">Madonna ontmoet Dulle Griet nogmaals</h3>
		</div>
		<span class="c-article__decoration" aria-hidden="true"></span>
	</div>
</a>
			

		

Documentation

Modifiers

  • c-article--vertical

    Increases the aspect ratio of the images to a more vertical look.