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>

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.