Steps

V000-13

Geef een stappenplan weer als opgedeelde panelen, waar tussendoor ook nog afbeeldingen weergegeven kunnen worden. De layout wordt automatisch zo goed mogelijk weggezet. Standaard is er ondersteuning tot 8 panelen. Op mobiel zullen de stappen onder elkaar gezet worden. Hou er bij het uitsnijden van een eventuele afbeelding rekening mee dat hoe de afbeelding uitgesneden wordt ook exact in het stappenplan komt te staan.

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS regels in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
HTML
<div class="py-5">
	<div class="container">
		<nc-element name="stappenplan-title" type="h2" default="Stappen"></nc-element>
		<nc-preset-list attributes="class=steps" name="steps-content" layout-button="Stap toevoegen">
			<template nc-preset-key="2/3 Tekst 1/3 Foto" nc-preset-name="Optie 1">
				<div class="row">
					<div class="col-12 col-md-8">
						<div class="steps-text steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-text name="{%name%}-text"></nc-text>
							<nc-element name="step-counter-{%name%}" default="00" attributes="class=step-count-number"></nc-element>
						</div>
					</div>
					<div class="col-12 col-md-4">
						<div class="steps-image steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-image name="{%name%}-image" width="640"></nc-image>
						</div>
					</div>
				</div>
			</template>
			<template nc-preset-key="2/3 Foto 1/3 Tekst" nc-preset-name="Optie 2">
				<div class="row">
					<div class="col-12 col-md-8">
						<div class="steps-image steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-image name="{%name%}-image" width="640"></nc-image>
						</div>
					</div>
					<div class="col-12 col-md-4">
						<div class="steps-text steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-text name="{%name%}-text"></nc-text>
							<nc-element name="step-counter-{%name%}" default="00" attributes="class=step-count-number"></nc-element>
						</div>
					</div>
				</div>
			</template>
			<template nc-preset-key="1/6 Foto 5/6 Text" nc-preset-name="Optie 3">
				<div class="row">
					<div class="col-12 col-md-2">
						<div class="steps-image steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-image name="{%name%}-image" width="640"></nc-image>
						</div>
					</div>
					<div class="col-12 col-md-10">
						<div class="steps-text steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-text name="{%name%}-text"></nc-text>
							<nc-element name="step-counter-{%name%}" default="00" attributes="class=step-count-number"></nc-element>
						</div>
					</div>
				</div>
			</template>
			<template nc-preset-key="5/6 Text 1/6 Foto" nc-preset-name="Optie 4">
				<div class="row">
					<div class="col-12 col-md-10">
						<div class="steps-text steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-text name="{%name%}-text"></nc-text>
							<nc-element name="step-counter-{%name%}" default="00" attributes="class=step-count-number"></nc-element>
						</div>
					</div>
					<div class="col-12 col-md-2">
						<div class="steps-image steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-image name="{%name%}-image" width="640"></nc-image>
						</div>
					</div>
				</div>
			</template>
			<template nc-preset-key="1/2 Foto 1/2 Text" nc-preset-name="Optie 5">
				<div class="row">
					<div class="col-12 col-md-6">
						<div class="steps-image steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-image name="{%name%}-image" width="640"></nc-image>
						</div>
					</div>
					<div class="col-12 col-md-6">
						<div class="steps-text steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-text name="{%name%}-text"></nc-text>
							<nc-element name="step-counter-{%name%}" default="00" attributes="class=step-count-number"></nc-element>
						</div>
					</div>
				</div>
			</template>
			<template nc-preset-key="1/2 Tekst 1/2 Foto" nc-preset-name="Optie 6">
				<div class="row">
					<div class="col-12 col-md-6">
						<div class="steps-text steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-text name="{%name%}-text"></nc-text>
							<nc-element name="step-counter-{%name%}" default="00" attributes="class=step-count-number"></nc-element>
						</div>
					</div>
					<div class="col-12 col-md-6">
						<div class="steps-image steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-image name="{%name%}-image" width="640"></nc-image>
						</div>
					</div>
				</div>
			</template>
			<template nc-preset-key="5/12 Tekst 7/12 2x Tekst" nc-preset-name="Optie 7">
				<div class="row">
					<div class="col-12 col-md-5">
						<div class="steps-text steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-text name="{%name%}-text"></nc-text>
							<nc-element name="step-counter-{%name%}" default="00" attributes="class=step-count-number"></nc-element>
						</div>
					</div>
					<div class="col-12 col-md-7">
						<div data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<div class="steps-text steps-panel">
								<nc-text name="{%name%}-text-2"></nc-text>
								<nc-element name="step-counter-{%name%}-2" default="00" attributes="class=step-count-number"></nc-element>
							</div>
							<div class="steps-text steps-panel">
								<nc-text name="{%name%}-text-3"></nc-text>
								<nc-element name="step-counter-{%name%}-3" default="00" attributes="class=step-count-number"></nc-element>
							</div>
						</div>
					</div>
				</div>
			</template>
			<template nc-preset-key="7/12 Tekst 5/12 2x Tekst" nc-preset-name="Optie 8">
				<div class="row">
					<div class="col-12 col-md-5">
						<div data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<div class="steps-text steps-panel">
								<nc-text name="{%name%}-text-2"></nc-text>
								<nc-element name="step-counter-{%name%}-2" default="00" attributes="class=step-count-number"></nc-element>
							</div>
							<div class="steps-text steps-panel">
								<nc-text name="{%name%}-text-3"></nc-text>
								<nc-element name="step-counter-{%name%}-3" default="00" attributes="class=step-count-number"></nc-element>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-7">
						<div class="steps-text steps-panel" data-equal="step-height-{%name%}">
							<nc-text name="{%name%}-text"></nc-text>
							<nc-element name="step-counter-{%name%}" default="00" attributes="class=step-count-number"></nc-element>
						</div>
					</div>
				</div>
			</template>
			<template nc-preset-key="7/12 Tekst 5/12 2x Tekst" nc-preset-name="Optie 8">
				<div class="row">
					<div class="col-12 col-md-5">
						<div data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<div class="steps-text steps-panel">
								<nc-text name="{%name%}-text-2"></nc-text>
								<nc-element name="step-counter-{%name%}-2" default="00" attributes="class=step-count-number"></nc-element>
							</div>
							<div class="steps-text steps-panel">
								<nc-text name="{%name%}-text-3"></nc-text>
								<nc-element name="step-counter-{%name%}-3" default="00" attributes="class=step-count-number"></nc-element>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-7">
						<div class="steps-text steps-panel" data-equal="step-height-{%name%}" data-equal-exclude="xs,sm">
							<nc-text name="{%name%}-text"></nc-text>
							<nc-element name="step-counter-{%name%}" default="00" attributes="class=step-count-number"></nc-element>
						</div>
					</div>
				</div>
			</template>
			<template nc-preset-key="100% Tekst" nc-preset-name="Optie 9">
				<div class="row">
					<div class="col-12">
						<div class="steps-text steps-panel">
							<nc-text name="{%name%}-text"></nc-text>
							<nc-element name="step-counter-{%name%}" default="00" attributes="class=step-count-number"></nc-element>
						</div>
					</div>
				</div>
			</template>
			<template nc-preset-key="100% Image" nc-preset-name="Optie 10">
				<div class="row">
					<div class="col-12">
						<div class="steps-image steps-panel" data-equal="step-height-{%name%}">
							<nc-image name="{%name%}-image" width="1280" height="100"></nc-image>
						</div>
					</div>
				</div>
			</template>
		</nc-preset-list>
	</div>
</div>
CSS
.steps-panel{
	margin: 15px 0;
}

body[data-editor-mode="layout"] .steps.row{
	display: block;
}


.steps-text {
   position: relative;
   display: block;
   border-radius: var(--panel-radius);
   padding: 2.5rem 2.5rem 5.5rem;
   background-color: var(--tertiary-light);
   color: inherit;

}

.step-count-number{
   position: absolute;
   bottom: 1rem;
   left: 1rem;
   display: flex;
   font-family: var(--font-family-heading);
   font-size: 4rem;
   line-height: 4rem;
   color: var(--tertiary);
}

.steps .steps-image * {
   height: 100%;
   object-fit: cover;
}

@media only screen and (min-width: 992px){
   .steps-text{
	   padding: 2.5rem 2.5rem 5rem 10rem;
   }
}