Info

The info component contains a title, a link for more info and some text, which is hidden on mobile.

Default

px

			
				<div class="c-info ">
	<div class="c-info__wrapper">
		<h2 class="c-info__title">Praktisch</h2>
		<a class="c-link c-link--secondary c-info__link" href="#">
			<span class="c-link__description">Meer informatie</span>
			<span class="c-link__decoration" aria-hidden="true"></span>
		</a>
		<div class="c-info__description s-wysiwyg">
			<p>Morbi leo risus, porta ac consectetur ac, vestibulum at
				eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
				interdum.</p>
		</div>
	</div>
	<div class="c-info__divider">
		<div class="c-divider "></div>
	</div>
</div>
			

		

Large

px

			
				<div class="c-info js-info c-info--large">
	<div class="c-info__wrapper">
		<h2 class="c-info__title">Praktisch</h2>
		<a class="c-link c-link--secondary c-info__link" href="#">
			<span class="c-link__description">Meer informatie</span>
			<span class="c-link__decoration" aria-hidden="true"></span>
		</a>
		<div class="c-info__description">
			<div class="c-info__preview s-wysiwyg">
				<p><strong>Ontvang 1 lidkaart</strong><br>
					<p>Ben je een liefhebber
						van kunst? Als Vriend van het KMSKA beleef je de collectie van op de
						eerste rij.</p>
			</div>
			<div class="c-info__content s-wysiwyg">
				<p>Morbi leo risus, porta ac consectetur ac, vestibulum at
					eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
					interdum.</p>
				<p>Morbi leo risus, porta ac consectetur ac, vestibulum at
					eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
					interdum.</p>
				<p>Morbi leo risus, porta ac consectetur ac, vestibulum at
					eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
					interdum.</p>
				<p>Morbi leo risus, porta ac consectetur ac, vestibulum at
					eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
					interdum.</p>
			</div>
			<button class="c-info__button">
				<span class="c-info__button-text">Lees meer</span>
				<div class="c-icon c-info__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>
	<div class="c-info__divider">
		<div class="c-divider "></div>
	</div>
</div>