Content highlight

The content highlight component is used for highlighting different art pieces. It contains a title, label, an image and the story behind the artwork. When the description exceeds a certain height, a "read more"- button will appear. When the user extends the description, the image will scroll along.

Default

px

			
				<section class="c-content-highlight js-content-highlight ">
	<div class="l-grid l-grid--default-spacing l-grid--align:top c-content-highlight__grid">
		<div class="l-grid__col:12/12 l-grid__col:5/12@at:vp-7 c-content-highlight__content">
			<a class="c-link c-content-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-content-highlight__label">
				kunstwerk
			</div>
			<div class="c-content-highlight__title-wrapper">
				<h2 class="c-content-highlight__title">De Intrige</h2>
			</div>
			<h3 class="c-content-highlight__creator">
				James Ensor, 1890
			</h3>
			<p class="c-content-highlight__description">
				Dit schilderij intrigeert. Een vrouw heeft een man aan
				de haak geslagen. Met een gebaar van haar hand stelt zij haar
				‘verovering’ voor. In haar andere hand houdt ze een boeketje bloemen.
				Zijn ze gehuwd? Mogelijk. Lachwekkende, sinistere gezichten
				omcirkelen het paar. Een boerse vrouw draagt een pop op haar
				schouder. Of is het een dood kind? Ze wijst naar de man – zijn lot
				is onzeker. Een doodskop met losgeslagen onderkaak slaat het
				tafereel gade. Felle, agressieve kleurcontrasten en ruwe, nerveuze
				borstelstreken versterken de akelige sfeer. Met De intrige schilderde
				James Ensor één van de mooiste maskerades uit zijn oeuvre. Meestal
				verbergen maskers het ware gelaat van hun dragers. Bij Ensor werken
				ze net omgekeerd. Vanaf 1880 gebruikte le peintre des masques deze
				vermommingen om de innerlijke kwaadaardigheid van zijn personages te
				onthullen in bizarre, groteske scènes. Sommige kunsthistorici zien
				in dit werk Ensors persoonlijke visie op het huwelijk. De bruid
				neemt de bruidegom beet. De arme man kan nergens meer heen.
			</p>
			<button class="c-content-highlight__button">
				<span class="c-content-highlight__button-text">Lees meer</span>
				<div class="c-icon c-content-highlight__button-icon">
					<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
						<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
					</svg>
				</div>
			</button>
		</div>
		<div class="
					l-grid__col:12/12
					l-grid__col:7/12@at:vp-7
					l-grid__col--order:-1@to:vp-7
					c-content-highlight__image" style="background-image: url('/assets/images/highlights/highlight-04.jpg');
				">
			<img class="u-visually-hidden u-idle" src="/assets/images/highlights/highlight-04.jpg" alt="Schilderij De Intrige van James Ensor" width="1200" height="713">
		</div>
	</div>
</section>