Cta

This component is used to highlight a particular piece of content.

Default

px 

			
				<div class="m-cta m-cta--animate">
	<div class="m-cta__image-container">
		<img class="m-cta__image" src="/assets/images/cta/cta.jpg" width="800" height="600" alt="cta-image" loading="lazy" />
	</div>
	<div class="m-cta__content">
		<h2 class="m-cta__content__title">Inzamelpunt zoeken</h2>
		<p class="m-cta__content__text">Bebat beschikt over bijna 24.000 inzamelpunten. Dat is gemiddeld 1 inzamelpunt binnen een straal van 400 meter. Je gebruikte batterijen binnenbrengen was nog nooit zo makkelijk! Zoek hieronder een inzamelpunt in jouw buurt.</p>
		<button class="a-button m-cta__content__button ">
			<span class="a-button__icon a-button__icon--before icon-location"></span>
			<span class="a-button__text">Vind een inzamelpunt in jouw buurt</span>
		</button>
	</div>
</div>

Grey

px 

			
				<div class="m-cta m-cta--grey">
	<div class="m-cta__image-container">
		<img class="m-cta__image" src="/assets/images/cta/cta.jpg" width="800" height="600" alt="cta-image" loading="lazy" />
	</div>
	<div class="m-cta__content">
		<h2 class="m-cta__content__title">Inzamelpunt zoeken</h2>
		<p class="m-cta__content__text">Bebat beschikt over bijna 24.000 inzamelpunten. Dat is gemiddeld 1 inzamelpunt binnen een straal van 400 meter. Je gebruikte batterijen binnenbrengen was nog nooit zo makkelijk! Zoek hieronder een inzamelpunt in jouw buurt.</p>
		<button class="a-button m-cta__content__button ">
			<span class="a-button__icon a-button__icon--before icon-location"></span>
			<span class="a-button__text">Vind een inzamelpunt in jouw buurt</span>
		</button>
	</div>
</div>

Side content

px 

			
				<div class="m-cta m-cta--side-order-last-mobile">
	<div class="m-cta__content">
		<h2 class="m-cta__content__title">Perscontact</h2>
		<p class="m-cta__content__text">Voor medewerking aan een publicatie of het verkrijgen van achtergrondinformatie kun je direct contact opnemen met woordvoerder Fatima Boudjaoui. We helpen je graag bij je berichtgeving over allerlei onderwerpen.</p>
		<button class="a-button m-cta__content__button ">
			<span class="a-button__icon a-button__icon--before icon-arrow-right"></span>
			<span class="a-button__text">Contacteer ons</span>
		</button>
	</div>
	<div class="m-cta__side-container">
		<div class="m-contact-card ">
			<div class="m-contact-card__column">
				<picture class="m-contact-card__picture">
					<img class="m-contact-card__image" width="128" height="128" src="/assets/images/mock/campaign.jpg" alt="Fatima Boudjaoui" title="Fatima Boudjaoui" loading="lazy" />
				</picture>
			</div>
			<div class="m-contact-card__column">
				<h3 class="m-contact-card__name">
					Fatima Boudjaoui
				</h3>
				<p class="m-contact-card__function">
					Corporate Communication Manager, Spokeswomen
				</p>
			</div>
		</div>
	</div>
</div>

Documentation

Modifiers

  • m-cta--grey

    Gives a grey background

  • m-cta--animate

    This will give the component a jump animation to get the user his attention.