<section class="hero hero--content-light" data-gradient-color="blue">
<div class="hero-content">
<div class="card" aria-labelledby="card-heading">
<div class="card-inner">
<div class="card-content">
<div class="card-content-inner">
<header class="card-header">
<h3 id="card-sub-heading" class="heading heading--category card-subheading">Lorem ipsum dolor sit amet</h3>
<h2 id="card-heading" class="heading heading--secondary card-heading">Lorem ipsum dolor sit amet</h2>
</header>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam.</p>
<p>Quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-media" data-media-type="image">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 55.55555555555556%;" class="image-placeholder"></span>
<img src="/temp/hero-example.jpg" alt="" srcset="/temp/hero-example.jpg 1x,/temp/hero-example@2x.jpg 2x" data-object-fit="cover" data-object-position="center center">
</div>
</div>
</div>
</section>
<section class="card card--reversed card--full-bleed-media" aria-labelledby="card-0-heading">
<div class="card-inner">
<div class="card-media">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 58.2234559333796%;" class="image-placeholder transparent" data-img-attr='{"src":"/temp/card-image-example-2.jpg","alt":"","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/card-image-example-2.jpg" alt="" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
</div>
<div class="card-content">
<div class="card-content-inner">
<header class="card-header">
<h3 id="card-0-sub-heading" class="heading heading--category card-subheading">Clever Pay-As-You-Go</h3>
<h2 id="card-0-heading" class="heading heading--secondary card-heading">I only need access to the Clever network once in a while</h2>
</header>
<div class="card-body">
<p>Our Pay-As-You-Go products ensure that you can always use our charging stations in a pinch.</p>
</div>
<div class="child-components">
<form class="car-selector js-car-selector" action="" method="get" data-endpoint="https://clever-components.fallwinter.dk/.netlify/functions/server/api/cars/">
<div class="form-block form-block--select form-block--carBrand">
<label for="carBrand">Car Brand</label>
<div class="form-select">
<select id="carBrand" name="carBrand">
<option value="">Car Brand</option>
<option value="Seat">Seat</option>
<option value="Renault">Renault</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Audi">Audi</option>
<option value="Volvo">Volvo</option>
<option value="Ford">Ford</option>
<option value="Kia">Kia</option>
</select>
</div>
</div>
<div class="form-block form-block--select form-block--carModel">
<label for="carModel">Car Model</label>
<div class="form-select">
<select id="carModel" name="carModel" disabled>
<option value="">Car Model</option>
</select>
</div>
</div>
<div class="form-block form-block--button">
<button class="form-button btn" type="submit" disabled>
<span class="text">View</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="card card--full-bleed-media" aria-labelledby="card-0-heading">
<div class="card-inner">
<div class="card-media">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 58.2234559333796%;" class="image-placeholder transparent" data-img-attr='{"src":"/temp/card-image-example-3.jpg","alt":"","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/card-image-example-3.jpg" alt="" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
</div>
<div class="card-content">
<div class="card-content-inner">
<header class="card-header">
<h3 id="card-0-sub-heading" class="heading heading--category card-subheading">Clever Pay-As-You-Go</h3>
<h2 id="card-0-heading" class="heading heading--secondary card-heading">I only need access to the Clever network once in a while</h2>
</header>
<div class="card-body">
<p>Our Pay-As-You-Go products ensure that you can always use our charging stations in a pinch.</p>
</div>
<div class="child-components">
<a href="#" class="cta">
<span class="text">View</span>
<span class="icon icon-cta-arrow-right">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.5 15.1">
<path d="M49 0l-1.5 1.4 5.2 5.2H0v2h52.7l-5.2 5.1 1.5 1.4 7.5-7.5z" />
</svg></span>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="card card--reversed card--full-bleed-media" aria-labelledby="card-0-heading">
<div class="card-inner">
<div class="card-media">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 58.2234559333796%;" class="image-placeholder transparent" data-img-attr='{"src":"/temp/card-image-example-2.jpg","alt":"","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/card-image-example-2.jpg" alt="" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
</div>
<div class="card-content">
<div class="card-content-inner">
<header class="card-header">
<h3 id="card-0-sub-heading" class="heading heading--category card-subheading">Clever Pay-As-You-Go</h3>
<h2 id="card-0-heading" class="heading heading--secondary card-heading">I only need access to the Clever network once in a while</h2>
</header>
<div class="card-body">
<p>Our Pay-As-You-Go products ensure that you can always use our charging stations in a pinch.</p>
</div>
<div class="child-components">
<a href="#" class="cta">
<span class="text">View</span>
<span class="icon icon-cta-arrow-right">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.5 15.1">
<path d="M49 0l-1.5 1.4 5.2 5.2H0v2h52.7l-5.2 5.1 1.5 1.4 7.5-7.5z" />
</svg></span>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<div class="charging-stations-teaser js-charging-stations-teaser">
<div class="charging-stations-teaser-media">
<span class="icon icon-charge-dot">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<defs>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="-136.2382" y1="-118.9007" x2="-136.2382" y2="-119.9007" gradientTransform="matrix(32 0 0 32 4375.6216 3836.8674)">
<stop offset="0" style="stop-color:#006868" />
<stop offset="1" style="stop-color:#003737" />
</linearGradient>
</defs>
<circle fill="url(#gradient)" class="st0" cx="16" cy="16" r="16" />
<polyline fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round" class="st1" points="16.5,9 12,16 20,16 15.6,23" />
</svg>
</span>
</span>
<span class="icon icon-charge-road">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2856.1 1142.3">
<path d="M0.7,1047.5l-0.7-0.8c0.2-0.2,19.5-17.1,54.8-44.1l0.6,0.8C20.1,1030.4,0.9,1047.3,0.7,1047.5z M81.1,984.1l-0.6-0.8
c18.3-13.5,37.5-27.2,57.1-40.7l0.6,0.8C118.6,956.9,99.4,970.6,81.1,984.1z M164.6,925.4l-0.6-0.8c19.2-12.9,39-25.7,58.9-38.1
l0.5,0.8C203.6,899.8,183.8,912.6,164.6,925.4z M250.7,870.5l-0.5-0.9c19.9-12.1,40.2-24,60.4-35.6l0.5,0.9
C290.9,846.5,270.6,858.5,250.7,870.5z M339,819.3l-0.5-0.9c20.4-11.3,41.2-22.4,61.8-33l0.5,0.9C380.2,797,359.4,808.1,339,819.3z
M429.4,771.9L429,771c20.9-10.4,42.2-20.6,63.2-30.3l0.4,0.9C471.5,751.3,450.3,761.5,429.4,771.9z M521.7,728.4l-0.4-0.9
c21.3-9.5,43-18.7,64.5-27.5l0.4,0.9C564.7,709.7,543,719,521.7,728.4z M615.9,689.1l-0.4-0.9c21.8-8.5,43.9-16.7,65.6-24.4l0.3,0.9
C659.7,672.4,637.6,680.6,615.9,689.1z M711.7,654.3l-0.3-0.9c22.1-7.5,44.6-14.6,66.7-21.2l0.3,1
C756.3,639.7,733.8,646.8,711.7,654.3z M809.1,624.1l-0.3-1c22.5-6.3,45.3-12.3,67.7-17.8l0.2,1
C854.4,611.7,831.6,617.7,809.1,624.1z M908,598.9l-0.2-1c22.8-5.2,45.8-9.9,68.6-14.2l0.2,1C953.8,589,930.7,593.8,908,598.9z
M1008,579.1l-0.2-1c23-3.9,46.3-7.4,69.2-10.4l0.1,1C1054.3,571.7,1031,575.2,1008,579.1z M1109,564.9l-0.1-1
c23.2-2.6,46.7-4.7,69.7-6.3l0.1,1C1155.6,560.2,1132.2,562.3,1109,564.9z M1425.7,557.2c-3.7,0-7.5,0-11.2,0v-1c3.7,0,7.5,0,11.2,0
c19.4,0,39.1-0.4,58.7-1.1v1C1464.9,556.9,1445.1,557.2,1425.7,557.2z M1210.6,556.7l-0.1-1c23.3-1.2,46.8-1.9,70-2.1v1
C1257.4,554.8,1233.9,555.5,1210.6,556.7z M1382.5,556.6c-6.2-0.2-12.5-0.4-18.7-0.7c-17-0.7-34.2-1.2-51.3-1.4v-1
c17.1,0.2,34.3,0.6,51.3,1.4c6.2,0.3,12.4,0.5,18.6,0.7L1382.5,556.6z M1516.4,554.5l-0.1-1c23-1.4,46.5-3.3,69.7-5.7l0.1,1
C1562.9,551.2,1539.5,553.2,1516.4,554.5z M1618,545.3l-0.1-1c22.9-2.8,46.2-6.1,69.3-9.9l0.2,1
C1664.2,539.1,1640.9,542.4,1618,545.3z M1718.9,529.9l-0.2-1c22.7-4.1,45.7-8.8,68.6-13.8l0.2,1
C1764.7,521.1,1741.6,525.7,1718.9,529.9z M1818.8,508.9l-0.2-1c22.4-5.3,45.2-11.2,67.8-17.4l0.3,1
C1864,497.7,1841.2,503.5,1818.8,508.9z M1917.4,482.7l-0.3-1c22.1-6.4,44.6-13.4,66.9-20.7l0.3,1
C1962,469.3,1939.5,476.3,1917.4,482.7z M2014.7,451.9l-0.3-0.9c21.8-7.5,44-15.4,65.9-23.7l0.4,0.9
C2058.7,436.4,2036.5,444.4,2014.7,451.9z M2110.5,416.7l-0.4-0.9c21.5-8.4,43.3-17.3,64.9-26.4l0.4,0.9
C2153.9,399.4,2132,408.3,2110.5,416.7z M2204.8,377.6l-0.4-0.9c21.1-9.3,42.6-19,63.8-29l0.4,0.9
C2247.4,358.6,2226,368.3,2204.8,377.6z M2297.5,334.8l-0.4-0.9c20.8-10.1,41.9-20.6,62.7-31.3l0.5,0.9
C2339.5,314.2,2318.4,324.8,2297.5,334.8z M2388.6,288.7l-0.5-0.9c20.5-10.8,41.2-22.1,61.5-33.5l0.5,0.9
C2429.8,266.6,2409.1,277.9,2388.6,288.7z M2478.1,239.4l-0.5-0.9c20.1-11.6,40.4-23.5,60.4-35.6l0.5,0.9
C2518.5,215.9,2498.2,227.8,2478.1,239.4z M2565.8,187.1l-0.5-0.9c19.8-12.3,39.7-24.9,59.2-37.6l0.5,0.8
C2605.5,162.1,2585.6,174.8,2565.8,187.1z M2651.7,131.8l-0.6-0.8c19.6-13.1,39-26.4,57.8-39.6l0.6,0.8
C2690.7,105.4,2671.3,118.7,2651.7,131.8z M2735.7,73.6l-0.6-0.8c19.7-14.2,38.7-28.3,56.3-41.8l0.6,0.8
C2774.4,45.3,2755.4,59.3,2735.7,73.6z M2817.4,11.9l-0.6-0.8c9-7.2,13.7-11.1,13.7-11.1l0.7,0.1C2831.5,0.6,2831.5,0.6,2817.4,11.9
z M25.7,1138.3l-0.7-0.8c1.5-1.3,152-132.5,394.3-258.1c142.3-73.7,287.9-131.1,432.9-170.6c181.2-49.3,361.7-70.5,536.7-63.1
c174.8,7.4,360.7-17.1,552.5-73c153.4-44.7,311-109.4,468.2-192.3c267.7-141.2,444.1-288.2,445.9-289.7l0.6,0.8
c-1.8,1.5-178.2,148.6-446,289.8c-157.3,82.9-314.9,147.7-468.4,192.4c-191.9,55.9-377.9,80.4-552.9,73
c-174.8-7.4-355.3,13.8-536.4,63.1C707.6,749.2,562,806.6,419.8,880.3C177.6,1005.8,27.2,1137,25.7,1138.3z M25.7,1142.3l-0.7-0.8
c1.5-1.3,152-132.5,394.3-258.1c142.3-73.7,287.9-131.1,432.9-170.6c181.2-49.3,361.7-70.5,536.7-63.1
c174.8,7.4,360.7-17.1,552.5-73c153.4-44.7,311-109.4,468.2-192.3c267.7-141.2,444.1-288.2,445.9-289.7l0.6,0.8
c-1.8,1.5-178.2,148.6-446,289.8c-157.3,82.9-314.9,147.7-468.4,192.4c-191.9,55.9-377.9,80.4-552.9,73
c-174.8-7.4-355.3,13.8-536.4,63.1C707.6,753.2,562,810.6,419.8,884.3C177.6,1009.8,27.2,1141,25.7,1142.3z" />
<path class="motion-path" fill="none" d="M0,1110.1c1.5-1.3,153.3-136.1,397.6-265C541.1,769.3,688,710.4,834.2,669.9c182.8-50.6,364.9-72.4,541.3-64.8
c176.5,7.6,364.2-17.7,557.9-75.1c154.9-46,313.9-112.5,472.6-197.7c270.3-145.2,448.3-296.3,450.1-297.8" />
</svg>
</span>
</span>
<span class="icon icon-charge-car">
<span class="svg-container"><svg viewBox="0 0 120.7 56.2" xmlns="http://www.w3.org/2000/svg">
<path d="m117.5 42.7c1.1-2.2 1.7-4.3 2.2-5.8.8-2.9 1.1-6 1-9 .1-3.1-.3-6.1-1.2-9-.5-1.5-1.1-3.6-2.3-5.9-1.4-2.6-3.1-4.6-5.4-6.1-3.9-2.7-8.1-3-10.8-3-.4 0-.9 0-1.2-.1-4-.1-9.1.5-10 .7-.3.1-.7.1-1 .2l-9.5.1c-.3-.4-.9-1.1-1.6-1.9-1.8-2.1-2.5-2.5-2.9-2.6-1.2-.4-2.4-.2-2.5-.3l-1 .1 2.1 4.7-32.7-.4c-2.4-.1-4.7-.2-7.1-.1h-.4c-3.8-.1-13.8-.1-19.5 1.8-1.2.3-2.3.8-3.4 1.3-1.7.7-3 1.5-3.8 2.1-4.8 3.5-5.8 10.8-6.2 13.9-.2 1.6-.3 3.3-.3 5 0 1.6.2 3.3.4 5 .4 3.1 1.5 10.4 6.3 13.9.8.5 2.2 1.5 3.9 2.2 1.1.5 2.2.9 3.4 1.3 5.7 1.8 15.8 1.6 19.5 1.5h.4c2.3-.1 4.7-.1 7-.2l32.7-.7-2 4.7.9.1h.6c.5 0 1.1 0 1.9-.3.4-.2 1.1-.6 3-2.6.6-.8 1.3-1.5 1.6-1.9l9.5-.1c.4 0 .7.1 1 .2.9.2 5.9.7 10 .6.4 0 .8 0 1.2-.1 2.8-.2 7-.5 10.8-3.2 2.3-1.4 4.1-3.6 5.4-6.1zm-6.4-34.8c3.6 2.5 5.3 6.2 6.3 9.1-1.7-2.2-3.5-4.3-5.4-6.3-2.1-2.2-3.5-3.4-5.1-4.4-.5-.3-.9-.6-1.4-.8 1.9.5 3.8 1.1 5.6 2.4zm-100.2 1.1c-1.6 1.2-3 2.5-4.3 4-1.1 1.3-2.2 2.6-3.1 4.1l-.3.5c.8-2.5 2.2-5.2 4.3-6.8.6-.5 2-1.4 3.5-2.1.1-.1.1 0 .2-.1 0 .2-.1.3-.3.4zm.5 39.1c-1.6-.7-3-1.6-3.6-2.1-2.2-1.6-3.6-4.2-4.5-6.7l.3.6c.9 1.4 2 2.8 3.2 4 1.3 1.4 2.8 2.8 4.3 3.9.2.1.3.2.5.4-.1.1-.1 0-.2-.1zm95.2-.2c-2 1.2-4.2 2.2-6.6 2.7-3.8.2-8.7-.3-9.5-.6-.4-.1-.9-.2-1.4-.2l-10.1.1-.2.3c-1.5 1.9-3.5 4.1-4 4.3-.3 0-.5.1-.8.2l2.1-4.9-35 .8c-2.3.1-4.7.1-7 .2h-.4c-2.8.1-10.8.2-16.4-.8-1.8-.9-3.7-2-5.3-3.3-1.5-1.2-2.9-2.4-4.2-3.8-1.1-1.2-2.1-2.5-3-3.9-1.1-1.7-2-3.4-2.9-5.2 0-.3 0-.4-.1-.6-.3-1.6-.4-3.2-.4-4.8s.1-3.2.4-4.8c0-.2.1-.4.1-.7.8-1.8 1.7-3.6 2.7-5.2.9-1.3 1.9-2.7 3-3.9 1.2-1.4 2.6-2.7 4-3.8 1.6-1.3 3.4-2.4 5.2-3.4 5.6-1.2 13.6-1 16.4-1.1h.4c2.3 0 4.7 0 7.1.1l35 .3-2.2-4.9c.2 0 .4.1.7.2.5.1 2.6 2.4 4.1 4.2l.2.3 10.1-.1c.5 0 .9 0 1.4-.2.8-.2 5.6-.7 9.5-.7 2.4.5 4.5 1.4 6.6 2.6 1.5 1 2.7 2 4.8 4.1 2.6 2.8 5.2 5.9 7.5 9.2.5 2.1.6 4.2.6 6.4v.3c-.1.1 0 .1 0 .3.1 2.2-.1 4.4-.5 6.5-2.3 3.3-4.8 6.4-7.4 9.3-1.8 2.5-3 3.6-4.5 4.5zm4.8-.2c-1.8 1.3-3.8 2-5.6 2.4.5-.3.9-.5 1.5-.9 1.6-1 2.9-2.3 5-4.5 1.8-2 3.6-4.1 5.2-6.3-.8 3-2.4 6.7-6.1 9.3zm-53.1-27.2c17.2.4 31.9 1.5 32.1 1.4v-.4c-.1 0-14.9-1-32.1-1.4-10.1-.2-19.1-.3-26.8-.1-9.5.3-17 1-22 2l.1.3c11.5-2.2 32.8-2.2 48.7-1.8zm.2 3.3c-10.2-.3-19.3-.3-27 0-9.6.3-17.1.9-22.2 2l.1.3c11.6-2.3 33.2-2.4 49.2-2 17.4.4 32.2 1.4 32.4 1.4v-.4c-.2 0-15.1-1-32.5-1.3zm40.1-12.8c8.6 2 12.9 4.4 15.1 6l.2-.3c-4.1-2.9-10.6-5-15.3-6.1-5.1-1.2-9.4-1.7-9.4-1.7v.4c.1 0 4.3.5 9.4 1.7zm-71.2-.2c2.8 0 11-.1 19.8-.4 14.6-.6 23.9-1.4 27.6-2.7l.9-.3h-.9c-.5 0-1.1 0-2.1 0-9 0-36.4 0-46.4 3.2l-.9.3h.9c.1-.1.4-.1 1.1-.1zm39.1-3.1c2.6 0 4.6-.1 6.3 0 .4 0 .8 0 1.1-.1-9.4 2.5-40.3 2.8-46.4 2.8 8.7-2.2 27.6-2.7 39-2.7zm-8.4 11.4c17.1.5 31.6 1.4 31.8 1.5v-.4c-.1 0-14.7-1-31.8-1.5-10-.2-19-.3-26.6 0-9.5.3-16.8 1-21.8 2l.1.3c11.4-2.2 32.5-2.2 48.3-1.9zm35.3 8.8c0-.6 0-3.4-.7-6.9-1-5.2-2.8-9.3-5.3-11.9l-.2-.2h-.8c-5 0-10.6.4-16.7 1.2-9.6 1.2-23.4 1.7-23.4 1.7-15.1.7-28.3 1.7-32.8 2.4-.9.2-3 .4-4.4 2.1-.8.8-1.4 2.1-1.8 5.6-.2 2.2-.3 4.5-.2 6.7 0 2.3 0 4.5.3 6.7.4 3.5 1.1 4.8 1.9 5.5 1.5 1.6 3.6 1.9 4.5 2 4.5.6 17.7 1.5 32.8 2 .1 0 13.9.3 23.5 1.4 6.1.6 11.7 1 16.7.9h.8l.2-.2c2.5-2.7 4.2-6.8 5.1-12 .6-3.6.5-6.5.5-7zm-6.6 17.7c-5 0-10.5-.2-16.6-.9-9.6-1.1-23.2-1.3-23.6-1.4-17.4-.6-28.9-1.4-32.7-1.9-.8-.1-2.5-.3-3.6-1.6-.5-.5-1-1.4-1.5-4.7-.2-2.1-.4-4.3-.4-6.5l.1-.1.1-.1c-.1-2.2 0-4.3.2-6.4.4-3.2.9-4.2 1.4-4.8 1.1-1.3 2.8-1.5 3.6-1.6 3.7-.5 15.2-1.5 32.7-2.4.4 0 14-.5 23.6-1.7 6-.7 11.6-1.2 16.6-1.2h.1c2.8 3.1 4.1 7.6 4.7 11 .6 3.3.7 5.9.7 6.6v.1c-.2 1.5-.4 11.9-5.4 17.6zm12-.9c-5.1 1.3-9.3 2-9.4 1.9l.1.4s4.3-.6 9.4-1.9c8.6-2.2 13-4.7 15.2-6.4l-.2-.3c-3.8 3-10.3 5-15.1 6.3zm-51.4 1.3c-10.9-.3-20.7-.2-20.9-.1h-.9l.9.3c8.4 2.5 28.4 2.7 40.2 2.6 2.6 0 4.6 0 6.2-.1h2.1.9l-.8-.3c-3.8-1.3-13.1-2-27.7-2.4zm25.6 2.4c-8.8.1-34.6.5-45.3-2.2 6.1 0 37-.2 46.4 2.3-.4-.1-.7-.1-1.1-.1z" />
</svg>
</span>
</span>
</div>
<section class="card card--centered card--mega-header" aria-labelledby="card-0-heading">
<div class="card-inner">
<div class="card-content">
<div class="card-content-inner">
<header class="card-header">
<h3 id="card-0-sub-heading" class="heading heading--category card-subheading">Clever charging stations</h3>
<h2 id="card-0-heading" class="heading heading--secondary card-heading">748</h2>
</header>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="child-components">
<a href="#" class="cta">
<span class="text">Find a charger</span>
<span class="icon icon-cta-arrow-right">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.5 15.1">
<path d="M49 0l-1.5 1.4 5.2 5.2H0v2h52.7l-5.2 5.1 1.5 1.4 7.5-7.5z" />
</svg></span>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="card card--full-bleed-media card--gallery" aria-labelledby="card-0-heading">
<div class="card-inner">
<div class="card-media">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 112.99435028248588%;" class="image-placeholder" data-img-attr='{"src":"/temp/charging-box-01.jpg","alt":"","srcset":"/temp/charging-box-01.jpg 1x,/temp/charging-box-01@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/charging-box-01.jpg" alt="" srcset="/temp/charging-box-01.jpg 1x,/temp/charging-box-01@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
</div>
<div class="card-content">
<div class="card-content-inner">
<header class="card-header">
<h3 id="card-0-sub-heading" class="heading heading--category card-subheading">Lorem ipsum dolor sit amet</h3>
<h2 id="card-0-heading" class="heading heading--secondary card-heading">Lorem ipsum dolor sit amet</h2>
</header>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam.</p>
<p>Quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>
<div class="child-components">
<a href="#" class="cta">
<span class="text">Read more</span>
<span class="icon icon-cta-arrow-right">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.5 15.1">
<path d="M49 0l-1.5 1.4 5.2 5.2H0v2h52.7l-5.2 5.1 1.5 1.4 7.5-7.5z" />
</svg></span>
</span>
</a>
</div>
</div>
</div>
<aside class="card-aside">
<div class="card-aside-column">
<div class="video-embed js-video-embed small-12 medium-11 large-9">
<a href="https://www.youtube.com/watch?v=vwrvbjBF7YQ" class="video-embed-btn" target="_blank">
<span class="icon icon-toggle-video">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.3 56">
<path d="M2 56c-.6 0-1.3-.3-1.6-.9-.3-.3-.4-.7-.4-1.1V2C0 .9.9 0 2 0c.4 0 .8.1 1.1.4l37.3 26c.9.6 1.1 1.9.5 2.8-.1.2-.3.4-.5.5l-37.3 26c-.3.2-.7.3-1.1.3zM2 2v52l37.3-26L2 2z" />
</svg>
</span>
</span>
</a>
<div class="video-embed-poster">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 65.439672801636%;" class="image-placeholder" data-img-attr='{"src":"/temp/charging-box-03.jpg","alt":"","srcset":"/temp/charging-box-03.jpg 1x,/temp/charging-box-03@2x.jpg 2x"}'></span>
<noscript><img src="/temp/charging-box-03.jpg" alt="" srcset="/temp/charging-box-03.jpg 1x,/temp/charging-box-03@2x.jpg 2x"></noscript>
</div>
</div>
</div>
</div>
</div>
<div class="card-aside-column">
<div class="image small-12 medium-10 large-8">
<div class="image-inner">
<span style="padding-bottom: 153.7037037037037%;" class="image-placeholder" data-img-attr='{"src":"/temp/charging-box-02.jpg","alt":"","srcset":"/temp/charging-box-02.jpg 1x,/temp/charging-box-02@2x.jpg 2x"}'></span>
<noscript><img src="/temp/charging-box-02.jpg" alt="" srcset="/temp/charging-box-02.jpg 1x,/temp/charging-box-02@2x.jpg 2x"></noscript>
</div>
</div>
</div>
</aside>
</div>
</section>
<div class="app-showcase js-app-showcase">
<div class="app-showcase-inner">
<div class="app-showcase-media">
<div class="mask"></div>
<div class="media">
<div class="media-item" data-heading="Start charging">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 216.42512077294685%;" class="image-placeholder" data-img-attr='{"src":"/temp/app-screenshot-3.jpg","alt":"","srcset":"/temp/app-screenshot-3.jpg 1x,/temp/app-screenshot-3@2x.jpg 2x"}'></span>
<noscript><img src="/temp/app-screenshot-3.jpg" alt="" srcset="/temp/app-screenshot-3.jpg 1x,/temp/app-screenshot-3@2x.jpg 2x"></noscript>
</div>
</div>
</div>
<div class="media-item" data-heading="Find your station">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 216.42512077294685%;" class="image-placeholder" data-img-attr='{"src":"/temp/app-screenshot-2.jpg","alt":"","srcset":"/temp/app-screenshot-2.jpg 1x,/temp/app-screenshot-2@2x.jpg 2x"}'></span>
<noscript><img src="/temp/app-screenshot-2.jpg" alt="" srcset="/temp/app-screenshot-2.jpg 1x,/temp/app-screenshot-2@2x.jpg 2x"></noscript>
</div>
</div>
</div>
<div class="media-item" data-heading="Choose your plug">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 216.34103019538188%;" class="image-placeholder" data-img-attr='{"src":"/temp/app-screenshot-1.jpg","alt":"","srcset":"/temp/app-screenshot-1.jpg 1x,/temp/app-screenshot-1@2x.jpg 2x"}'></span>
<noscript><img src="/temp/app-screenshot-1.jpg" alt="" srcset="/temp/app-screenshot-1.jpg 1x,/temp/app-screenshot-1@2x.jpg 2x"></noscript>
</div>
</div>
</div>
</div>
</div>
<div class="app-showcase-content">
<div class="app-showcase-content-inner">
<h2 class="heading heading--secondary app-showcase-heading">Charging has never been this easy</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<div class="app-showcase-links">
<a href="#" class="btn">
<span class="icon icon-app-ios">
<span class="svg-container"><svg viewBox="0 0 136.5 162" xmlns="http://www.w3.org/2000/svg">
<path d="m133.6 126.3c-2.4 5.7-5.4 10.9-8.7 15.7-4.6 6.5-8.3 11.1-11.2 13.6-4.5 4.1-9.3 6.2-14.4 6.4-3.7 0-8.1-1.1-13.3-3.2s-10-3.2-14.3-3.2c-4.6 0-9.5 1.1-14.7 3.2-5.3 2.1-9.5 3.2-12.7 3.4-4.9.2-9.8-2-14.7-6.5-3.1-2.7-7-7.4-11.7-14-5-7.1-9.2-15.3-12.4-24.7-3.8-10.3-5.5-20.1-5.5-29.6 0-10.9 2.3-20.2 7-28.1 3.7-6.3 8.6-11.3 14.8-14.9s12.8-5.5 19.9-5.6c3.9 0 9 1.2 15.4 3.6s10.4 3.6 12.2 3.6c1.3 0 5.9-1.4 13.6-4.2 7.3-2.6 13.4-3.7 18.4-3.3 13.6 1.1 23.9 6.5 30.7 16.2-12.2 7.4-18.2 17.7-18.1 31 .1 10.3 3.9 18.9 11.2 25.8 3.3 3.2 7.1 5.6 11.2 7.4-.7 2.5-1.7 5-2.7 7.4zm-31.3-123.1c0 8.1-3 15.7-8.9 22.7-7 8.3-15.7 13.1-25 12.4-.1-1-.2-2-.2-3.1 0-7.8 3.4-16.1 9.4-22.9 3-3.4 6.8-6.3 11.4-8.6s9-3.5 13.1-3.7c.2 1.1.2 2.2.2 3.2z" />
</svg>
</span>
</span>
<span class="text">iOS App</span>
</a>
<a href="#" class="btn">
<span class="icon icon-app-android">
<span class="svg-container"><svg viewBox="0 0 468 553" xmlns="http://www.w3.org/2000/svg">
<path d="m34.2 179.1c-9.5 0-17.6 3.3-24.3 10s-9.9 14.6-9.9 23.9v143c0 9.5 3.3 17.6 10 24.3 6.6 6.6 14.7 10 24.3 10 9.5 0 17.6-3.3 24.1-10 6.5-6.6 9.8-14.7 9.8-24.3v-143c0-9.3-3.3-17.3-10-23.9s-14.7-10-24-10z" />
<path d="m309.4 50.8 23.6-43.5c1.5-2.9 1-5.1-1.7-6.6-2.9-1.3-5.1-.7-6.6 2l-23.9 43.9c-21.1-9.3-43.3-14-66.8-14s-45.8 4.7-66.8 14l-23.9-43.9c-1.6-2.7-3.8-3.3-6.6-2-2.7 1.6-3.2 3.8-1.7 6.6l23.6 43.5c-23.9 12.2-43 29.2-57.2 51s-21.3 45.7-21.3 71.6h307.4c0-25.9-7.1-49.8-21.3-71.6-14.1-21.8-33.1-38.8-56.8-51zm-136.4 63.4c-2.6 2.6-5.6 3.8-9.1 3.8s-6.5-1.3-9-3.8c-2.4-2.5-3.7-5.6-3.7-9.1s1.2-6.6 3.7-9.1c2.4-2.5 5.4-3.8 9-3.8s6.6 1.3 9.1 3.8c2.5 2.6 3.8 5.6 3.8 9.1s-1.3 6.5-3.8 9.1zm140.1 0c-2.4 2.6-5.4 3.8-9 3.8s-6.6-1.3-9.1-3.8c-2.6-2.5-3.8-5.6-3.8-9.1s1.3-6.6 3.8-9.1 5.6-3.8 9.1-3.8 6.5 1.3 9 3.8c2.4 2.6 3.7 5.6 3.7 9.1-.1 3.5-1.3 6.5-3.7 9.1z" />
<path d="m81.4 406.8c0 10.2 3.5 18.8 10.6 25.9s15.7 10.6 25.9 10.6h24.6l.3 75.5c0 9.5 3.3 17.6 10 24.3s14.6 10 23.9 10c9.5 0 17.6-3.3 24.3-10 6.6-6.6 10-14.7 10-24.3v-75.4h45.9v75.4c0 9.5 3.3 17.6 10 24.3s14.7 10 24.3 10c9.5 0 17.6-3.3 24.3-10s10-14.7 10-24.3v-75.4h24.9c10 0 18.5-3.5 25.6-10.6s10.6-15.7 10.6-25.9v-221.5h-305.2z" />
<path d="m433.7 179.1c-9.3 0-17.3 3.3-23.9 9.8s-10 14.6-10 24.1v143c0 9.5 3.3 17.6 10 24.3s14.6 10 23.9 10c9.5 0 17.6-3.3 24.3-10s10-14.7 10-24.3v-143c0-9.5-3.3-17.6-10-24.1s-14.7-9.8-24.3-9.8z" />
</svg>
</span>
</span>
<span class="text">Android App</span>
</a>
</div>
</div>
</div>
</div>
</div>
{% for module in pageModules %}
{% include '@' ~ module.type with module.content|merge({ tagName: 'section' }) only %}
{% endfor %}
{
"title": "Clever",
"siteHeader": {
"siteUrl": "../../components/preview/home.html",
"primaryNavigation": {
"primaryNavigationItems": [
{
"title": "Products",
"url": "../../components/preview/products.html"
},
{
"title": "How It Works",
"url": "#",
"selected": true
},
{
"title": "Car Guide",
"url": "../../components/preview/car-guide.html"
},
{
"title": "Customer Service",
"url": "#"
},
{
"title": "Webshop",
"url": "#"
}
],
"primaryNavigationModifiers": [
"selected"
]
}
},
"siteFooter": {
"newsletterSignup": {
"newsletterSignupSubheading": "Join the movement",
"newsletterSignupHeading": "EV's are here to stay",
"newsletterSignupAcceptPolicyText": "Accept af persondatapolitik ifm. nyhedsbreve. <a href=\"#\">Læs mere her</a>",
"newsletterSignupEndpoint": "https://clever-components.fallwinter.dk/.netlify/functions/server/mailchimp"
},
"siteDirectories": [
{
"title": "About Clever",
"url": null,
"children": [
{
"title": "Owners",
"url": "#"
},
{
"title": "Jobs",
"url": "#"
},
{
"title": "Partnerships",
"url": "#"
},
{
"title": "Press",
"url": "#"
},
{
"title": "Persondatapolitik",
"url": "#"
}
]
},
{
"title": "Erhverv",
"url": null,
"children": [
{
"title": "Mindre virksomhed",
"url": "#"
},
{
"title": "Større virksomhed",
"url": "#"
},
{
"title": "Kommune",
"url": "#"
},
{
"title": "Boligforening",
"url": "#"
},
{
"title": "Flådeadministratorer",
"url": "#"
}
]
},
{
"title": "Customer service",
"url": null,
"children": [
{
"title": "Go ladestil",
"url": "#"
},
{
"title": "Lost your card?",
"url": "#"
},
{
"title": "Driftstatus",
"url": "#"
},
{
"title": "Tilmeld betalingsservice",
"url": "#"
},
{
"title": "Local parkingrules",
"url": "#"
}
]
}
],
"socialLinks": [
{
"url": "#",
"icon": "icon-instagram.svg",
"text": "Instagram"
},
{
"url": "#",
"icon": "icon-facebook.svg",
"text": "Facebook"
},
{
"url": "#",
"icon": "icon-linkedin.svg",
"text": "LinkedIn"
}
],
"siteLocales": [
{
"url": "#",
"text": "Swe"
},
{
"url": "#",
"text": "No"
},
{
"url": "#",
"text": "Eng"
},
{
"url": "#",
"text": "Dk",
"active": true
}
]
},
"pageModules": [
{
"type": "hero",
"content": {
"heroGradientColor": "blue",
"heroModifiers": [
"content-light"
],
"heroMedia": {
"url": "/temp/hero-example.jpg",
"width": 1440,
"height": 800,
"alt": "",
"contain": false,
"transparent": false,
"retina": true,
"sizes": [
{
"url": "/temp/hero-example.jpg"
},
{
"url": "/temp/hero-example@2x.jpg"
}
]
},
"heroSubheading": "Lorem ipsum dolor sit amet",
"heroHeading": "Lorem ipsum dolor sit amet",
"heroBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n\t\t<p>Ut enim ad minim veniam.</p>\n\t\t<p>Quis nostrud exercitation ullamco laboris nisi ut.</p>"
}
},
{
"type": "card",
"content": {
"cardId": "card-0",
"cardModifiers": [
"reversed",
"full-bleed-media"
],
"cardMedia": {
"type": "image",
"content": {
"url": "/temp/card-image-example-2.jpg",
"width": 1441,
"height": 839,
"lazyload": true,
"transparent": true
}
},
"cardHeading": "I only need access to the Clever network once in a while",
"cardSubheading": "Clever Pay-As-You-Go",
"cardBody": "<p>Our Pay-As-You-Go products ensure that you can always use our charging stations in a pinch.</p>",
"childComponents": [
{
"type": "car-selector",
"content": {
"carSelectorFormAction": null,
"carSelectorApiEndpoint": "https://clever-components.fallwinter.dk/.netlify/functions/server/api/cars/",
"carSelectorFormBlocks": [
{
"type": "form-block-select",
"content": {
"formBlockLabel": "Car Brand",
"formBlockName": "carBrand",
"formBlockOptions": [
{
"value": "",
"label": "Car Brand"
},
{
"value": "Seat",
"label": "Seat"
},
{
"value": "Renault",
"label": "Renault"
},
{
"value": "Mercedes-Benz",
"label": "Mercedes-Benz"
},
{
"value": "Audi",
"label": "Audi"
},
{
"value": "Volvo",
"label": "Volvo"
},
{
"value": "Ford",
"label": "Ford"
},
{
"value": "Kia",
"label": "Kia"
}
]
}
},
{
"type": "form-block-select",
"content": {
"formBlockLabel": "Car Model",
"formBlockName": "carModel",
"formBlockDisabled": true,
"formBlockOptions": [
{
"value": "",
"label": "Car Model"
}
]
}
},
{
"type": "form-block-button",
"content": {
"formBlockDisabled": true,
"formBlockButtonLabel": "View",
"formBlockButtonAttributes": {
"type": "submit"
}
}
}
]
}
}
]
}
},
{
"type": "card",
"content": {
"cardId": "card-0",
"cardModifiers": [
"full-bleed-media"
],
"cardMedia": {
"type": "image",
"content": {
"url": "/temp/card-image-example-3.jpg",
"width": 1441,
"height": 839,
"lazyload": true,
"transparent": true
}
},
"cardHeading": "I only need access to the Clever network once in a while",
"cardSubheading": "Clever Pay-As-You-Go",
"cardBody": "<p>Our Pay-As-You-Go products ensure that you can always use our charging stations in a pinch.</p>",
"childComponents": [
{
"type": "call-to-action",
"content": {
"url": "#",
"text": "View"
}
}
]
}
},
{
"type": "card",
"content": {
"cardId": "card-0",
"cardModifiers": [
"reversed",
"full-bleed-media"
],
"cardMedia": {
"type": "image",
"content": {
"url": "/temp/card-image-example-2.jpg",
"width": 1441,
"height": 839,
"lazyload": true,
"transparent": true
}
},
"cardHeading": "I only need access to the Clever network once in a while",
"cardSubheading": "Clever Pay-As-You-Go",
"cardBody": "<p>Our Pay-As-You-Go products ensure that you can always use our charging stations in a pinch.</p>",
"childComponents": [
{
"type": "call-to-action",
"content": {
"url": "#",
"text": "View"
}
}
]
}
},
{
"type": "charging-stations-teaser",
"content": {
"chargingStationsTeaser": {
"cardId": "card-0",
"cardModifiers": [
"centered",
"mega-header"
],
"cardHeading": "748",
"cardSubheading": "Clever charging stations",
"cardBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
"childComponents": [
{
"type": "call-to-action",
"content": {
"url": "#",
"text": "Find a charger"
}
}
]
}
}
},
{
"type": "card",
"content": {
"cardId": "card-0",
"cardMedia": {
"type": "image",
"content": {
"url": "/temp/charging-box-01.jpg",
"width": 708,
"height": 800,
"lazyload": true,
"retina": true,
"sizes": [
{
"url": "/temp/charging-box-01.jpg"
},
{
"url": "/temp/charging-box-01@2x.jpg"
}
]
}
},
"cardHeading": "Lorem ipsum dolor sit amet",
"cardSubheading": "Lorem ipsum dolor sit amet",
"cardBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n\t\t<p>Ut enim ad minim veniam.</p>\n\t\t<p>Quis nostrud exercitation ullamco laboris nisi ut.</p>",
"cardModifiers": [
"full-bleed-media",
"gallery"
],
"childComponents": [
{
"type": "call-to-action",
"content": {
"url": "#",
"text": "Read more"
}
}
],
"cardGallery": [
[
{
"type": "video-embed",
"columnSize": 9,
"content": {
"poster": {
"url": "/temp/charging-box-03.jpg",
"width": 489,
"height": 320,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/charging-box-03.jpg"
},
{
"url": "/temp/charging-box-03@2x.jpg"
}
]
},
"url": "https://www.youtube.com/watch?v=vwrvbjBF7YQ"
}
}
],
[
{
"type": "image",
"columnSize": 8,
"content": {
"url": "/temp/charging-box-02.jpg",
"width": 432,
"height": 664,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/charging-box-02.jpg"
},
{
"url": "/temp/charging-box-02@2x.jpg"
}
]
}
}
]
]
}
},
{
"type": "app-showcase",
"content": {
"appShowcaseMedia": [
{
"type": "image",
"heading": "Start charging",
"content": {
"url": "/temp/app-screenshot-3.jpg",
"lazyload": true,
"retina": true,
"width": 414,
"height": 896,
"sizes": [
{
"url": "/temp/app-screenshot-3.jpg"
},
{
"url": "/temp/app-screenshot-3@2x.jpg"
}
]
}
},
{
"type": "image",
"heading": "Find your station",
"content": {
"url": "/temp/app-screenshot-2.jpg",
"lazyload": true,
"retina": true,
"width": 414,
"height": 896,
"sizes": [
{
"url": "/temp/app-screenshot-2.jpg"
},
{
"url": "/temp/app-screenshot-2@2x.jpg"
}
]
}
},
{
"type": "image",
"heading": "Choose your plug",
"content": {
"url": "/temp/app-screenshot-1.jpg",
"lazyload": true,
"retina": true,
"width": 563,
"height": 1218,
"sizes": [
{
"url": "/temp/app-screenshot-1.jpg"
},
{
"url": "/temp/app-screenshot-1@2x.jpg"
}
]
}
}
],
"appShowcaseHeading": "Charging has never been this easy",
"appShowcaseBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>",
"appShowcaseLinks": [
{
"text": "iOS App",
"url": "#",
"icon": "icon-app-ios.svg"
},
{
"text": "Android App",
"url": "#",
"icon": "icon-app-android.svg"
}
]
}
}
],
"pageModifiers": []
}
No notes defined.