Spotlight

The spotlight component displays and explains a feature of the brand. It mainly contains a title and text and is often accompanied by an image and a button.

Since the special shape for the visual is a crucial part of this component, you always need to specify it through a modifier.

Alternative

Wil je later beslissen?

Wil je wel verduurzamen maar weet je nog niet precies wat je wilt doen of wil je eerst gesetteld zijn voordat je hier over na gaat denken? Geen probleem. Lot reserveert dan alvast een bedrag voor je terwijl jij later kunt belissen waar je het geld voor gaat gebruiken. Je hebt twee jaar de tijd om de werkzaamheden uit te laten voeren. Zo kun jij je nu focussen op de verbouwing of inrichting.


			
				<section class="c-spotlight c-spotlight-- l-section c-spotlight--alternative">
	<div class="c-spotlight__container l-container">
		<div class="c-spotlight__content">
			<h1 class="c-spotlight__title">Wil je later beslissen?</h1>
			<p class="c-spotlight__text">Wil je wel verduurzamen maar weet je nog niet precies wat je wilt
				doen of wil je eerst gesetteld zijn voordat je hier over na gaat denken?
				Geen probleem. Lot reserveert dan alvast een bedrag voor je terwijl jij
				later kunt belissen waar je het geld voor gaat gebruiken. Je hebt twee
				jaar de tijd om de werkzaamheden uit te laten voeren. Zo kun jij je nu
				focussen op de verbouwing of inrichting.</p>
			<button class="c-button c-spotlight__button c-button--secondary c-button--secondary-green ">
				<span class="c-button__text">meer weten?</span>
			</button>
		</div>
	</div>
</section>

Pin

Use the pin-shapped clipping mask by applying this modifier:

  • c-spotlight--pin

Zoek je een adviseur?

Geen zin om je bezig te houden met het regelen van een hypotheek? Spendeer je liever je tijd aan iets nuttig zoals het afspreken met je vrienden of het voorbereiden van je house warming party?

Laat je helpen door lot, zij regelt alles voor jou.


			
				<section class="c-spotlight c-spotlight--pin l-section ">
	<div class="c-spotlight__container l-container">
		<div class="c-spotlight__content">
			<h2 class="c-spotlight__title">Zoek je een adviseur?</h2>
			<p class="c-spotlight__text">Geen zin om je bezig te houden met het regelen van een hypotheek?
				Spendeer je liever je tijd aan iets nuttig zoals het afspreken met je
				vrienden of het voorbereiden van je house warming party? <br> <br> Laat
				je helpen door lot, zij regelt alles voor jou.</p>
			<button class="c-button c-spotlight__button c-button--secondary ">
				<span class="c-button__text">vind een adviseur</span>
			</button>
		</div>
		<div class="c-spotlight__visual">
			<div class="c-spotlight__visual-background" style="background-image: url('/assets/images/general/background/bg-shapes-02.svg');"></div>
			<div class="c-spotlight__visual-container">
				<div class="c-spotlight__visual-image-wrapper">
					<div class="c-spotlight__visual-image" style="background-image: url('/assets/images/general/spotlight/spotlight-05.jpg');"></div>
				</div>
				<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="c-spotlight__svg c-spotlight__svg--pin">
					<clipPath class="c-spotlight__mask" id="c-spotlight__mask--pin" clipPathUnits="objectBoundingBox">
						<path id="path-1" d="M0.8192139,0.3130229C0.8190209,0.317438,0.8188219,	0.3201157,0.8187975,0.322794
									c-0.0004107,0.0480868-0.0102759,0.094047-0.0309892,0.1374471C0.7527668,0.533656,0.7175125,0.6069729,0.6823836,0.6803491
									C0.6780927,0.6893134,0.6740157,0.6983848,0.6696597,0.7077934L0.6649402,0.7171145
									c-0.0085013,0.0176694-0.0165169,0.034237-0.0244553,0.0508418c-0.0317951,0.066522-0.0639828,0.1328581-0.0951381,0.1996831
									C0.533394,0.9932795,0.5054442,1.0064251,0.4816836,0.9993209c-0.014463-0.0043262-0.0258243-0.0127492-0.0327192-0.0266714
									c-0.0015397-0.0031109-0.0029321-0.0063012-0.004382-0.0094578C0.391771,0.8482155,0.3389063,0.7332678,0.2861808,0.618251
									C0.2596766,0.5604345,0.2328863,0.5027471,0.2073001,0.4445152C0.1938273,0.4138573,0.187002,0.3811387,0.1846333,0.3475283
									c-0.0033347-0.0472881,0.0028429-0.093262,0.0196246-0.1375381c0.0246701-0.0651009,0.065542-0.1173715,0.1233816-0.1555174
									c0.0132158-0.0087151,0.0270414-0.0167926,0.0413761-0.0234027C0.4221236,0.0065781,0.4778502-0.0033968,0.5359349,0.00324
									C0.6080576,0.0114843,0.670526,0.0410818,0.7227831,0.0920749c0.0221285,0.0215952,0.0402817,0.0463097,0.0554203,0.073538
									C0.8003097,0.2053698,0.8129159,0.2479224,0.8173191,0.29315C0.8173191,0.29315,0.8189732,0.3073257,0.8192139,0.3130229" />
					</clipPath>
				</svg>
			</div>
		</div>
	</div>
</section>

Polygon

Use the polygon-shapped clipping mask by applying this modifier:

  • c-spotlight--polygon

Lot staat voor je klaar

Geen zin om je bezig te houden met het regelen van een hypotheek? Spendeer je liever je tijd aan iets nuttig zoals het afspreken met je vrienden of het voorbereiden van je house warming party?

Laat je helpen door lot, zij regelt alles voor jou.


			
				<section class="c-spotlight c-spotlight--polygon l-section ">
	<div class="c-spotlight__container l-container">
		<div class="c-spotlight__content">
			<h1 class="c-spotlight__title">Lot staat voor je klaar</h1>
			<p class="c-spotlight__text">Geen zin om je bezig te houden met het regelen van een hypotheek?
				Spendeer je liever je tijd aan iets nuttig zoals het afspreken met je
				vrienden of het voorbereiden van je house warming party? <br> <br> Laat
				je helpen door lot, zij regelt alles voor jou.</p>
			<button class="c-button c-spotlight__button c-button--secondary ">
				<span class="c-button__text">wie is lot?</span>
			</button>
		</div>
		<div class="c-spotlight__visual">
			<div class="c-spotlight__visual-background" style="background-image: url('/assets/images/general/background/bg-shapes.svg');"></div>
			<div class="c-spotlight__visual-container">
				<div class="c-spotlight__visual-image-wrapper">
					<div class="c-spotlight__visual-image" style="background-image: url('/assets/images/general/spotlight/spotlight-01.jpg');"></div>
				</div>
				<svg viewbox="0 0 120 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="c-spotlight__svg c-spotlight__svg--polygon">
					<clipPath class="c-spotlight__mask" id="c-spotlight__mask--polygon" clipPathUnits="objectBoundingBox">
						<path id="polygon-mask" class="st0" d="M0.1486929,0.1659945l0.6913671,0.0921038
										c0.0468215,0.0062375,0.0633131,0.0124304,0.0800204,0.0226191c0.0167074,0.0101887,0.0298082,0.023864,0.039271,0.0409929
										c0.0094628,0.0171289,0.0149427,0.0338709,0.0191666,0.0809169l0.0223333,0.2487547
										c0.0059763,0.0665646-0.0431402,0.1253705-0.1097048,0.1313468C0.8886916,0.782949,0.8862305,0.7830944,0.8837667,0.7831645
										L0.1257953,0.8047264C0.0589901,0.8066267,0.0032931,0.754011,0.0013927,0.6872057
										C0.0013303,0.6850092,0.0013276,0.6828115,0.0013848,0.6806148l0.0103587-0.3978194
										c0.0017396-0.0668096,0.0573098-0.1195593,0.1241194-0.1178197C0.1401546,0.1650875,0.1444373,0.1654276,0.1486929,0.1659945z" />
					</clipPath>
				</svg>
			</div>
		</div>
	</div>
</section>

Theme green

The green variant of the default spotlight component is created by applying the modifier:

  • c-spotlight--theme-green

Een duurzame woning bouwen

Geen zin om je bezig te houden met het regelen van een hypotheek? Spendeer je liever je tijd aan iets nuttig zoals het afspreken met je vrienden of het voorbereiden van je house warming party?

Laat je helpen door lot, zij regelt alles voor jou.


			
				<section class="c-spotlight c-spotlight--polygon l-section c-spotlight--theme-green">
	<div class="c-spotlight__container l-container">
		<div class="c-spotlight__content">
			<h2 class="c-spotlight__title">Een duurzame woning bouwen</h2>
			<p class="c-spotlight__text">Geen zin om je bezig te houden met het regelen van een hypotheek?
				Spendeer je liever je tijd aan iets nuttig zoals het afspreken met je
				vrienden of het voorbereiden van je house warming party? <br> <br> Laat
				je helpen door lot, zij regelt alles voor jou.</p>
			<button class="c-button c-spotlight__button c-button--inverted ">
				<span class="c-button__text">duurzaamheid</span>
			</button>
		</div>
		<div class="c-spotlight__visual">
			<div class="c-spotlight__visual-background" style="background-image: url('/assets/images/general/background/bg-shapes-theme-green.svg');"></div>
			<div class="c-spotlight__visual-container">
				<div class="c-spotlight__visual-image-wrapper">
					<div class="c-spotlight__visual-image" style="background-image: url('/assets/images/general/spotlight/spotlight-02.jpg');"></div>
				</div>
				<svg viewbox="0 0 120 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="c-spotlight__svg c-spotlight__svg--polygon">
					<clipPath class="c-spotlight__mask" id="c-spotlight__mask--polygon" clipPathUnits="objectBoundingBox">
						<path id="polygon-mask" class="st0" d="M0.1486929,0.1659945l0.6913671,0.0921038
										c0.0468215,0.0062375,0.0633131,0.0124304,0.0800204,0.0226191c0.0167074,0.0101887,0.0298082,0.023864,0.039271,0.0409929
										c0.0094628,0.0171289,0.0149427,0.0338709,0.0191666,0.0809169l0.0223333,0.2487547
										c0.0059763,0.0665646-0.0431402,0.1253705-0.1097048,0.1313468C0.8886916,0.782949,0.8862305,0.7830944,0.8837667,0.7831645
										L0.1257953,0.8047264C0.0589901,0.8066267,0.0032931,0.754011,0.0013927,0.6872057
										C0.0013303,0.6850092,0.0013276,0.6828115,0.0013848,0.6806148l0.0103587-0.3978194
										c0.0017396-0.0668096,0.0573098-0.1195593,0.1241194-0.1178197C0.1401546,0.1650875,0.1444373,0.1654276,0.1486929,0.1659945z" />
					</clipPath>
				</svg>
			</div>
		</div>
	</div>
</section>

Documentation

Modifiers

  • c-spotlight--pin

    Uses the pin-shaped clipping mask

  • c-spotlight--polygon

    Uses the polygon-shapped clipping mask

  • c-spotlight--theme-green

    Change the standard theme of the badge to a green variant