Test Page

WIP

Notes
HTML
View
Info

No notes defined.


        
        <!-- Error rendering component -->
<!-- (unknown path)
  Error: Could not render component '@spk-document-list-item--sunken' - component not found. -->
<!-- Template render error: (unknown path)
  Error: Could not render component '@spk-document-list-item--sunken' - component not found.
    at Object._prettifyError (/Users/apart/Documents/projects/spuerkeess-design-system/node_modules/nunjucks/src/lib.js:32:11)
    at /Users/apart/Documents/projects/spuerkeess-design-system/node_modules/nunjucks/src/environment.js:464:19
    at eval (eval at _compile (/Users/apart/Documents/projects/spuerkeess-design-system/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:115:12)
    at eval (eval at _compile (/Users/apart/Documents/projects/spuerkeess-design-system/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:428:13)
    at /Users/apart/Documents/projects/spuerkeess-design-system/node_modules/@frctl/nunjucks/src/extensions/render.js:47:25
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) -->


        {% extends "@spk-page-layout" %}
{% block header %}
	{% render "@spk-header--main" %}
{% endblock %}
{% block mainTop %}
	<section class="{{ namespace }}section -sectionSunken">
		<div class="{{ namespace }}section__innerWrapper">
			<div class="{{ namespace }}section__inner">
				<div class="container">
					{% render "@spk-comparison-table--buttons" %}
				</div>
			</div>
		</div>
	</section>
<section class="{{ namespace }}section -sectionSunken -sectionInverted">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container {{ namespace }}stackLg">
				{% render "@spk-contextual-links--accordion" %}
{#				{% render "@spk-contextual-links--inverted" %}#}
				{% render "@spk-contextual-links" %}
			</div>
		</div>
	</div>
</section>
<section class="{{ namespace }}section">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				{% render "@checkbox" %}
				<div class="{{ namespace }}stackLg">
					<div class="h4">La société est-elle domiciliée?</div>
					<ul class="list-unstyled {{ namespace }}stackMd">
						<li>
							{% render "@radio",{inputName: "step-1-soc-dom", id: "radio-step-1-soc-dom-1", text: "Oui", checked: true},true %}
						</li>
						<li>
							{% render "@radio",{inputName: "step-1-soc-dom", id: "radio-step-1-soc-dom-2", text: "Non"},true %}
						</li>
					</ul>
				</div>
				<div class="{{ namespace }}section__textColor">
					<p>text inside content section</p>
					{% render "@input--hint" %}
					{% render "@select" %}
					{% render "@spk-advanced-select-item" %}
					{% render "@spk-advanced-select" %}
				</div>
				<div class="{{ namespace }}stackLg">
					{% render "@btn-secondary" %}
					{% render "@btn-secondary-inverse" %}
					<div class="{{ namespace }}box -insetLg {{ namespace }}stackLg">
						<p>text inside box</p>
						{% render "@btn-secondary" %}
						{% render "@btn-secondary-inverse" %}
						{% render "@btn-primary" %}
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<div class="frame-type-apartbcee_highlightedarticles">
	<section class="{{ namespace }}section">
		<div class="{{ namespace }}section__innerWrapper">
			<div class="{{ namespace }}section__inner">
				<div class="{{ namespace }}stack3xl">
					<div class="container">
						{% render "@hero-heading" %}
					</div>
					<div class="container">
						{% render "@spk-highlighted-article-list" %}
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
<section class="{{ namespace }}section -sectionSunken -sectionInverted">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="{{ namespace }}stack3xl">
				<div class="container">
					{% render "@spk-spot-select-list--default" %}
				</div>
				<div class="container">
					{% render "@range" %}
				</div>
			</div>
		</div>
	</div>
</section>
<section class="{{ namespace }}section">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				{% render '@spk-content-box--info-outline',{
					eltType: "div"
				}, true %}
			</div>
		</div>
	</div>
</section>
<section class="{{ namespace }}section">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				<div class="{{ namespace }}stackXl">
					{% render "@heading--h2-subtext",{
						text: "Vous souhaitez effectuer une simulation, prendre un rendez-vous ou consulter un document ?",
						subText: "Spuerkeess vous propose un éventail d'outils digitaux."
					},true %}
					<div class="row">
						<div class="col-12 col-md-6 col-lg-3">
							{% render '@spk-icon-link-box' %}
						</div>
						<div class="col-12 col-md-6 col-lg-3">
							{% render '@spk-icon-link-box' %}
						</div>
						<div class="col-12 col-md-6 col-lg-3">
							{% render '@spk-icon-link-box' %}
						</div>
						<div class="col-12 col-md-6 col-lg-3">
							{% render '@spk-icon-link-box' %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="{{ namespace }}section -sectionSunken">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
{#				{% render "@spk-comparison-table" %}#}
			</div>
		</div>
	</div>
</section>
<section class="{{ namespace }}section -sectionSunken">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				{% render "@spk-quote" %}
			</div>
		</div>
	</div>
</section>
<section class="{{ namespace }}section -sectionSunken">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				<div class="{{ namespace }}stackXl">
					<div class="h2">Comment pouvons-nous vous accompagner ?</div>
					{% render "@spk-decision-help" %}
				</div>
			</div>
		</div>
	</div>
</section>
<section class="{{ namespace }}section">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				<div class="row align-items-center">
					<div class="col-12 col-sm-6">
						<img class="img-fluid"
							 src="https://design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-relaxingsofa.svg"
							 alt="">
					</div>
					<div class="col-12 col-sm-6">
						<div class="{{ namespace }}stackXxl">
							<div class="{{ namespace }}stackXl">
								<div class="h3">Trois raisons pour devenir client</div>
								{% render "@spk-feature-icon-box-list",{
									rowModifiers: []
								},true %}
							</div>
							<div class="{{ namespace}}btnGroup">
								{% render "@btn-secondary",{
									eltType: "a",
									text: "Je centralise mes finances"
								},true %}
								{% render "@btn-primary",{
									eltType: "a",
									text: "Je deviens client"
								},true %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="{{ namespace }}section">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				<div class="{{ namespace }}stackXl">
					{% render "@heading--h2-subtext",{
						text: "Optez pour l’expertise de Spuerkeess",
						subText: "Devenez client depuis votre smartphone - c’est facile et rapide"
					},true %}
					{% render '@spk-new-mobile-version' %}
				</div>
			</div>
		</div>
	</div>
</section>
{% render "@spk-page-cover" %}
<section class="{{ namespace }}section -sectionSunken">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				<div class="row align-items-stretch-immediate-typo3">
					<div class="col-12 col-lg-4">
						<div class="frame-default">
							{% render "@spk-picture-link-box--vertical" %}
						</div>
					</div>
					<div class="col-12 col-lg-4">
						<div class="frame-default">
							{% render "@spk-picture-link-box--vertical" %}
						</div>
					</div>
					<div class="col-12 col-lg-4">
						<div class="frame-default">
							{% render "@spk-picture-link-box--vertical" %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
{% render "@spk-related-articles" %}

<section class="{{ namespace }}section -sectionSunken">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				<div class="{{ namespace }}section__textColor">
					<p>text inside content section</p>
				</div>
				<div class="{{ namespace }}stackLg">
					{% render "@btn-secondary" %}
					{% render "@btn-secondary-inverse" %}
					<div class="{{ namespace }}box -insetLg {{ namespace }}stackLg">
						<p>text inside box</p>
						{% render "@btn-secondary" %}
						{% render "@btn-secondary-inverse" %}
					</div>
					<div class="{{ namespace }}box -insetLg -boxSunken {{ namespace }}stackLg">
						<p>text inside box</p>
						{% render "@btn-secondary" %}
						{% render "@btn-secondary-inverse" %}
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="{{ namespace }}section -sectionSunken -sectionInverted">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				<div class="{{ namespace }}section__textColor">
					<p>text inside content section</p>
				</div>
				<div class="{{ namespace }}stackLg">
					{% render "@btn-secondary" %}
					{% render "@btn-secondary-inverse" %}
					<div class="{{ namespace }}box -insetLg {{ namespace }}stackLg">
						<p>text inside box</p>
						{% render "@btn-secondary" %}
						{% render "@btn-secondary-inverse" %}
					</div>
				</div>
				{% render '@spk-content-box' %}
				{% render '@spk-content-box--link' %}
				{% render '@spk-content-box--info' %}
				{% render '@spk-content-box--important' %}
				{% render '@spk-content-box--success' %}
				{% render '@spk-content-box--warning' %}
				{% render '@spk-content-box--link' %}
				{% render '@spk-document-list-item--sunken' %}
				<div class="sds-box -insetLg">
					<form action="">
						<label class="sds-label" for="">Test</label>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>
<div data-theme="retail-light">
{% render "@spk-lease-slider" %}
</div>
{% endblock %}
{% block main %}
{#	{% render "@spk-modal-base--popup" %}#}
	<section class="{{ namespace }}section" id="couponGrid">
		<div class="{{ namespace }}section__innerWrapper">
			<div class="{{ namespace }}section__inner">
				<div class="container">
					<div class="row justify-content-between">
						<div class="col-12 col-md-6">
							<div class="{{ namespace }}stackXl">
								{% render "@spk-coupon" %}
								{% render "@spk-coupon" %}
							</div>
						</div>
						<div class="col-12 col-md-6 col-lg-5">
							<div class="position-sticky {{ namespace }}stickyMd" data-reacts-to-headroom>
								{% render "@spk-coupon-partner" %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="{{ namespace }}section">
		<div class="{{ namespace }}section__innerWrapper">
			<div class="{{ namespace }}section__inner">
				<div class="container">
					<div class="row align-items-stretch-immediate-typo3">
							<div class="col-12 col-lg-4">
								<div class="frame-default">
									{% render "@spk-icon-link-box--social" %}
								</div>
							</div>
							<div class="col-12 col-lg-4">
								<div class="frame-default">
									{% render "@spk-links-icon-box" %}
								</div>
							</div>
							<div class="col-12 col-lg-4">
								<div class="frame-default">
									{% render "@spk-picture-link-box" %}
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="{{ namespace }}section" id="#porductFeatureDetails">
		<div class="{{ namespace }}section__innerWrapper">
			<div class="{{ namespace }}section__inner">
				<div class="container">
					{% render "@spk-product-feature-details" %}
				</div>
			</div>
		</div>
	</section>
	<section class="{{ namespace }}section -sectionSunken">
		<div class="{{ namespace }}section__innerWrapper">
			<div class="{{ namespace }}section__inner">
				<div class="container">
					<div class="row align-items-stretch-immediate">
						<div class="col-12 col-lg-4">
							{% render "@spk-product-column--spot-footer" %}
						</div>
						<div class="col-12 col-lg-4">
							{% render "@spk-product-column--spot-footer-img-top" %}
						</div>
						<div class="col-12 col-lg-4">
							{% render "@spk-product-column--spot-footer-img-small-top" %}
						</div>
					</div>
					<div class="row align-items-stretch-immediate">
						<div class="col-12 col-lg-4">
							{% render "@spk-product-column" %}
						</div>
						<div class="col-12 col-lg-4">
							{% render "@spk-product-column--small-img" %}
						</div>
						<div class="col-12 col-lg-4">
							{% render "@spk-product-column--no-img" %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
{% endblock %}
{% block contactFooter %}
	{% render "@spk-contact-footer" %}
{% endblock %}
{% block footer %}
	{% render "@footer" %}
	<div class="{{ namespace }}box -insetLg {{ namespace }}boxShadowActive" style="background: white !important; margin: auto; position: fixed; z-index: 10000000; bottom: 16px; left:0; right: 0; max-width: 400px; width: 100%">

		<div class="{{ namespace }}btnGroup">
			<select id="themeSelect" style="width: 50%;">
				<option value="retail">Retail</option>
				<option value="private">Private</option>
				<option value="axxess">Axxess</option>
				<option value="tweenz">Tweenz</option>
			</select>

			<select id="modeSelect" style="width: 50%;">
				<option value="light">Light Mode</option>
				<option value="dark">Dark Mode</option>
			</select>
		</div>
		<script>
			const themeSelect = document.getElementById('themeSelect');
			const modeSelect = document.getElementById('modeSelect');
			const body = document.body;

			themeSelect.addEventListener('change', () => {
				const newTheme = themeSelect.value;
				document.documentElement.setAttribute('data-brand', newTheme);
			});

			modeSelect.addEventListener('change', () => {
				const newMode = modeSelect.value;
				document.documentElement.setAttribute('data-mode', newMode);
			});
		</script>
	</div>
{% endblock %}
{% block misc %}
{#	{% render "@spk-search-modal" %}#}
{% endblock %}

Handle: @spk-test-page
Preview:
- With layout
- Component only
Filesystem Path: components/spuerkeess-site/pages/test-page/test-page.njk
References (53): @spk-page-layout, @spk-header--main, @spk-comparison-table--buttons, @spk-contextual-links--accordion, @spk-contextual-links--inverted, @spk-contextual-links, @checkbox, @radio, @input--hint, @select, @spk-advanced-select-item, @spk-advanced-select, @btn-secondary, @btn-secondary-inverse, @btn-primary, @hero-heading, @spk-highlighted-article-list, @spk-spot-select-list--default, @range, @spk-content-box--info-outline, @heading--h2-subtext, @spk-icon-link-box, @spk-comparison-table, @spk-quote, @spk-decision-help, @spk-feature-icon-box-list, @spk-new-mobile-version, @spk-page-cover, @spk-picture-link-box--vertical, @spk-related-articles, @spk-content-box, @spk-content-box--link, @spk-content-box--info, @spk-content-box--important, @spk-content-box--success, @spk-content-box--warning, @spk-lease-slider, @spk-modal-base--popup, @spk-coupon, @spk-coupon-partner, @spk-icon-link-box--social, @spk-links-icon-box, @spk-picture-link-box, @spk-product-feature-details, @spk-product-column--spot-footer, @spk-product-column--spot-footer-img-top, @spk-product-column--spot-footer-img-small-top, @spk-product-column, @spk-product-column--small-img, @spk-product-column--no-img, @spk-contact-footer, @footer, @spk-search-modal