Steps list

The steps-list displays the different steps the user must go through in the process. The number of steps can vary.

Default

  • Plan je afspraak

    Plan een afspraak met je adviseur en vraag een hypotheek van Lot aan. Plan een afspraak met je adviseur en vraag een hypotheek van Lot aan. Plan een afspraak met je adviseur en vraag een hypotheek van Lot aan. Plan een afspraak met je adviseur en vraag een hypotheek van Lot aan.

  • Breng documenten in orde

    Na ontvangst van het renteaanbod van Lot, lever je de documenten aan die Lot nodig heeft om je hypotheek te beoordelen. Na ontvangst van het renteaanbod van Lot, lever je de documenten aan die Lot nodig heeft om je hypotheek te beoordelen.

  • Gefeliciteerd!

    Lot stuurt je een definitieve offerte. Als je die ondertekent, regelt Lot de rest: gefeliciteerd! Lot stuurt je een definitieve offerte. Als je die ondertekent, regelt Lot de rest: gefeliciteerd! Lot stuurt je een definitieve offerte. Als je die ondertekent, regelt Lot de rest: gefeliciteerd!


			
				<div class="c-steps-list l-section ">
	<ul class="c-steps-list__content">
		<li class="c-steps-list__item l-container  c-steps-list__item--odd ">
			<article class="c-step ">
				<div class="c-step__container l-grid l-grid--with-spacing l-grid--align-middle">
					<div class="c-step__image-container l-grid__col l-grid__col--6@tablet" style="background-image: url('/assets/images/general/steps/step-01.jpg');">
						<svg class="c-step__image" viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<clipPath id="c-step__mask" clipPathUnits="objectBoundingBox">
								<path class="c-step__path" d="M0.157056042,0.141019361 L0.837358733,0.2779289 C0.869614847,0.284420377 0.880863811,0.289817872 0.892172568,0.29836292 C0.903481325,0.306907967 0.912216724,0.318070652 0.918380488,0.331853179 C0.924544252,0.345635705 0.927972826,0.358994167 0.929976378,0.396282018 L0.949363895,0.757100544 C0.95222352,0.810320633 0.916714632,0.856108026 0.870052573,0.859369551 L0.134167707,0.859500022 C0.0874181074,0.859496802 0.0495251793,0.816269846 0.0495251793,0.762949913 L0.0577128606,0.234386754 C0.0585400086,0.181075167 0.0971026507,0.138622362 0.143844933,0.13956576 C0.148275205,0.139655176 0.152692483,0.140141204 0.157056042,0.141019361 Z"></path>
							</clipPath>
						</svg>
					</div>
					<div class="c-step__content l-grid__col l-grid__col--6@tablet">
						<h3 class="c-step__title">Plan je afspraak</h3>
						<p class="c-step__text">Plan een afspraak met je adviseur en vraag een hypotheek van Lot
							aan. Plan een afspraak met je adviseur en vraag een hypotheek van Lot
							aan. Plan een afspraak met je adviseur en vraag een hypotheek van Lot
							aan. Plan een afspraak met je adviseur en vraag een hypotheek van Lot
							aan.</p>
					</div>
				</div>
			</article>
		</li>
		<li class="c-steps-list__item l-container  c-steps-list__item--even ">
			<article class="c-step c-step--reverse">
				<div class="c-step__container l-grid l-grid--with-spacing l-grid--align-middle">
					<div class="c-step__image-container l-grid__col l-grid__col--6@tablet" style="background-image: url('/assets/images/general/steps/step-02.jpg');">
						<svg class="c-step__image" viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<clipPath id="c-step__mask" clipPathUnits="objectBoundingBox">
								<path class="c-step__path" d="M0.157056042,0.141019361 L0.837358733,0.2779289 C0.869614847,0.284420377 0.880863811,0.289817872 0.892172568,0.29836292 C0.903481325,0.306907967 0.912216724,0.318070652 0.918380488,0.331853179 C0.924544252,0.345635705 0.927972826,0.358994167 0.929976378,0.396282018 L0.949363895,0.757100544 C0.95222352,0.810320633 0.916714632,0.856108026 0.870052573,0.859369551 L0.134167707,0.859500022 C0.0874181074,0.859496802 0.0495251793,0.816269846 0.0495251793,0.762949913 L0.0577128606,0.234386754 C0.0585400086,0.181075167 0.0971026507,0.138622362 0.143844933,0.13956576 C0.148275205,0.139655176 0.152692483,0.140141204 0.157056042,0.141019361 Z"></path>
							</clipPath>
						</svg>
					</div>
					<div class="c-step__content l-grid__col l-grid__col--6@tablet">
						<h3 class="c-step__title">Breng documenten in orde</h3>
						<p class="c-step__text">Na ontvangst van het renteaanbod van Lot, lever je de
							documenten aan die Lot nodig heeft om je hypotheek te
							beoordelen. Na ontvangst van het renteaanbod van Lot, lever je
							de documenten aan die Lot nodig heeft om je hypotheek te
							beoordelen.</p>
					</div>
				</div>
			</article>
		</li>
		<li class="c-steps-list__item l-container  c-steps-list__item--odd c-steps-list__item--last">
			<article class="c-step ">
				<div class="c-step__container l-grid l-grid--with-spacing l-grid--align-middle">
					<div class="c-step__image-container l-grid__col l-grid__col--6@tablet" style="background-image: url('/assets/images/general/steps/step-03.jpg');">
						<svg class="c-step__image" viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<clipPath id="c-step__mask" clipPathUnits="objectBoundingBox">
								<path class="c-step__path" d="M0.157056042,0.141019361 L0.837358733,0.2779289 C0.869614847,0.284420377 0.880863811,0.289817872 0.892172568,0.29836292 C0.903481325,0.306907967 0.912216724,0.318070652 0.918380488,0.331853179 C0.924544252,0.345635705 0.927972826,0.358994167 0.929976378,0.396282018 L0.949363895,0.757100544 C0.95222352,0.810320633 0.916714632,0.856108026 0.870052573,0.859369551 L0.134167707,0.859500022 C0.0874181074,0.859496802 0.0495251793,0.816269846 0.0495251793,0.762949913 L0.0577128606,0.234386754 C0.0585400086,0.181075167 0.0971026507,0.138622362 0.143844933,0.13956576 C0.148275205,0.139655176 0.152692483,0.140141204 0.157056042,0.141019361 Z"></path>
							</clipPath>
						</svg>
					</div>
					<div class="c-step__content l-grid__col l-grid__col--6@tablet">
						<h3 class="c-step__title">Gefeliciteerd!</h3>
						<p class="c-step__text">Lot stuurt je een definitieve offerte. Als je die
							ondertekent, regelt Lot de rest: gefeliciteerd! Lot stuurt je
							een definitieve offerte. Als je die ondertekent, regelt Lot de
							rest: gefeliciteerd! Lot stuurt je een definitieve offerte. Als
							je die ondertekent, regelt Lot de rest: gefeliciteerd!</p>
					</div>
				</div>
			</article>
		</li>
	</ul>
</div>

With tip

  • Lot laat je zien wat je kunt doen en hoeveel je kunt besparen

    Je wilt natuurlijk weten wat je precies kunt doen om je droomhuis te verduurzamen. Hiervoor kun je advies krijgen van een energiebespaaradviseur. Kies je voor een gratis online advies of laat je liever een adviseur bij je langs komen voor advies op maat? Bij Lot kun je alvast een 1e online scan uitvoeren waarmee je direct ziet wat jij kunt doen om te verduurzamen en wat je bespaart.

    Kies altijd een adviseur van een bedrijf met een BRL9500-02-certificaat.

  • Lot informeert je over de financiele mogelijkheden

    Heb je spaargeld of ander vermogen, dan kun je dit natuurlijk gebruiken om je woning te verduurzamen. Wil je dit niet of heb je geen eigen geld, dan kun je misschien een extra bedrag lenen via je hypotheek. Voor energiebesparende maatregelen kun je in veel gevallen meer lenen voor je woning. Laat je hierover adviseren door je hypotheekadviseur.

    check of je in jouw gemeente subsidie krijgt als je je woning verduurzaamt.

  • Aan de slag

    Als je weet wat je wilt doen om je woning te verduurzamen en hoe je ervoor gaat betalen, kun je op zoek naar installateurs om de werkzaamheden uit te voeren.

    Installateurs hebben allemaal hun eigen specialisme. Kijk voor gecertificeerde installateurs bij jou in de buurt. 


			
				<div class="c-steps-list l-section c-steps-list--with-tip">
	<ul class="c-steps-list__content">
		<li class="c-steps-list__item l-container  c-steps-list__item--odd ">
			<article class="c-step ">
				<div class="c-step__container l-grid l-grid--with-spacing l-grid--align-middle">
					<div class="c-step__image-container l-grid__col l-grid__col--6@tablet" style="background-image: url('/assets/images/general/steps/step-01.jpg');">
						<svg class="c-step__image" viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<clipPath id="c-step__mask" clipPathUnits="objectBoundingBox">
								<path class="c-step__path" d="M0.157056042,0.141019361 L0.837358733,0.2779289 C0.869614847,0.284420377 0.880863811,0.289817872 0.892172568,0.29836292 C0.903481325,0.306907967 0.912216724,0.318070652 0.918380488,0.331853179 C0.924544252,0.345635705 0.927972826,0.358994167 0.929976378,0.396282018 L0.949363895,0.757100544 C0.95222352,0.810320633 0.916714632,0.856108026 0.870052573,0.859369551 L0.134167707,0.859500022 C0.0874181074,0.859496802 0.0495251793,0.816269846 0.0495251793,0.762949913 L0.0577128606,0.234386754 C0.0585400086,0.181075167 0.0971026507,0.138622362 0.143844933,0.13956576 C0.148275205,0.139655176 0.152692483,0.140141204 0.157056042,0.141019361 Z"></path>
							</clipPath>
						</svg>
					</div>
					<div class="c-step__content l-grid__col l-grid__col--6@tablet">
						<h3 class="c-step__title">Lot laat je zien wat je kunt doen en hoeveel je kunt
							besparen</h3>
						<p class="c-step__text">Je wilt natuurlijk weten wat je precies kunt doen om je
							droomhuis te verduurzamen. Hiervoor kun je advies krijgen van
							een energiebespaaradviseur. Kies je voor een gratis online
							advies of laat je liever een adviseur bij je langs komen voor
							advies op maat? Bij Lot kun je alvast een 1e online scan
							uitvoeren waarmee je direct ziet wat jij kunt doen om te
							verduurzamen en wat je bespaart. </p>
						<div class="c-tip c-step__tip">
							<span class="fal fa-lightbulb c-tip__icon"></span>
							<p class="c-tip__text">Kies altijd een adviseur van een bedrijf met een
								BRL9500-02-certificaat.</p>
						</div>
					</div>
				</div>
			</article>
		</li>
		<li class="c-steps-list__item l-container  c-steps-list__item--even ">
			<article class="c-step c-step--reverse">
				<div class="c-step__container l-grid l-grid--with-spacing l-grid--align-middle">
					<div class="c-step__image-container l-grid__col l-grid__col--6@tablet" style="background-image: url('/assets/images/general/steps/step-02.jpg');">
						<svg class="c-step__image" viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<clipPath id="c-step__mask" clipPathUnits="objectBoundingBox">
								<path class="c-step__path" d="M0.157056042,0.141019361 L0.837358733,0.2779289 C0.869614847,0.284420377 0.880863811,0.289817872 0.892172568,0.29836292 C0.903481325,0.306907967 0.912216724,0.318070652 0.918380488,0.331853179 C0.924544252,0.345635705 0.927972826,0.358994167 0.929976378,0.396282018 L0.949363895,0.757100544 C0.95222352,0.810320633 0.916714632,0.856108026 0.870052573,0.859369551 L0.134167707,0.859500022 C0.0874181074,0.859496802 0.0495251793,0.816269846 0.0495251793,0.762949913 L0.0577128606,0.234386754 C0.0585400086,0.181075167 0.0971026507,0.138622362 0.143844933,0.13956576 C0.148275205,0.139655176 0.152692483,0.140141204 0.157056042,0.141019361 Z"></path>
							</clipPath>
						</svg>
					</div>
					<div class="c-step__content l-grid__col l-grid__col--6@tablet">
						<h3 class="c-step__title">Lot informeert je over de financiele mogelijkheden</h3>
						<p class="c-step__text">Heb je spaargeld of ander vermogen, dan kun je dit
							natuurlijk gebruiken om je woning te verduurzamen. Wil je dit
							niet of heb je geen eigen geld, dan kun je misschien een extra
							bedrag lenen via je hypotheek. Voor energiebesparende
							maatregelen kun je in veel gevallen meer lenen voor je woning.
							Laat je hierover adviseren door je hypotheekadviseur.</p>
						<div class="c-tip c-step__tip">
							<span class="fal fa-lightbulb c-tip__icon"></span>
							<p class="c-tip__text">check of je in jouw gemeente subsidie krijgt als
								je je woning verduurzaamt.</p>
						</div>
					</div>
				</div>
			</article>
		</li>
		<li class="c-steps-list__item l-container  c-steps-list__item--odd c-steps-list__item--last">
			<article class="c-step ">
				<div class="c-step__container l-grid l-grid--with-spacing l-grid--align-middle">
					<div class="c-step__image-container l-grid__col l-grid__col--6@tablet" style="background-image: url('/assets/images/general/steps/step-03.jpg');">
						<svg class="c-step__image" viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<clipPath id="c-step__mask" clipPathUnits="objectBoundingBox">
								<path class="c-step__path" d="M0.157056042,0.141019361 L0.837358733,0.2779289 C0.869614847,0.284420377 0.880863811,0.289817872 0.892172568,0.29836292 C0.903481325,0.306907967 0.912216724,0.318070652 0.918380488,0.331853179 C0.924544252,0.345635705 0.927972826,0.358994167 0.929976378,0.396282018 L0.949363895,0.757100544 C0.95222352,0.810320633 0.916714632,0.856108026 0.870052573,0.859369551 L0.134167707,0.859500022 C0.0874181074,0.859496802 0.0495251793,0.816269846 0.0495251793,0.762949913 L0.0577128606,0.234386754 C0.0585400086,0.181075167 0.0971026507,0.138622362 0.143844933,0.13956576 C0.148275205,0.139655176 0.152692483,0.140141204 0.157056042,0.141019361 Z"></path>
							</clipPath>
						</svg>
					</div>
					<div class="c-step__content l-grid__col l-grid__col--6@tablet">
						<h3 class="c-step__title">Aan de slag</h3>
						<p class="c-step__text">Als je weet wat je wilt doen om je woning te verduurzamen
							en hoe je ervoor gaat betalen, kun je op zoek naar installateurs
							om de werkzaamheden uit te voeren.</p>
						<div class="c-tip c-step__tip">
							<span class="fal fa-lightbulb c-tip__icon"></span>
							<p class="c-tip__text">Installateurs hebben allemaal hun eigen
								specialisme. Kijk voor gecertificeerde installateurs bij
								jou in de buurt. </p>
						</div>
					</div>
				</div>
			</article>
		</li>
	</ul>
</div>

Documentation

Modifiers

  • c-steps-list__item--even

    Adds a specific background image to the list items that have the main image placed on the left side and are even numbered in the enumeration.

  • c-steps-list__item--odd

    Adds a specific background image to the list items that have the main image placed on the right side and are odd numbered in the enumeration.

  • c-steps-list__item--last

    Removes the specific background image on the list item that comes last in the enumeration of the list.