<section class="hero hero--campaign-headline" data-gradient-color="green">
<div class="hero-content">
<div class="campaign-headline js-campaign-headline">
<h1 class="heading campaign-headline-heading">Driving on the bright side</h1>
</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" data-img-attr='{"src":"/temp/hero-example-3.jpg","alt":"","srcset":"/temp/hero-example-3.jpg 1x,/temp/hero-example-3@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/hero-example-3.jpg" alt="" srcset="/temp/hero-example-3.jpg 1x,/temp/hero-example-3@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
</div>
</section>
<div class="banner">
<div class="banner-inner">
<div class="heading heading--category banner-caption">Find us wherever you go</div>
<h2 class="heading heading--secondary banner-heading">Enjoy the ride and leave<br>the charging to us</h2>
</div>
</div>
<div class="content-blocks">
<section class="content-blocks-inner">
<div class="content-block">
<div class="content-block-media">
<div class="image medium-11 large-9">
<div class="image-inner">
<span style="padding-bottom: 135.78732106339467%;" class="image-placeholder" data-img-attr='{"src":"/temp/content-blocks-1.jpg","alt":"","srcset":"/temp/content-blocks-1.jpg 1x,/temp/content-blocks-1@2x.jpg 2x"}'></span>
<noscript><img src="/temp/content-blocks-1.jpg" alt="" srcset="/temp/content-blocks-1.jpg 1x,/temp/content-blocks-1@2x.jpg 2x"></noscript>
</div>
</div>
</div>
<div class="content-block-content">
<div class="content-block-content-inner">
<h2 class="heading heading--secondary">At home</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 consequat</p>
</div>
</div>
</div>
<div class="content-block">
<div class="content-block-media">
<div class="image full-bleed">
<div class="image-inner">
<span style="padding-bottom: 112.99435028248588%;" class="image-placeholder" data-img-attr='{"src":"/temp/content-blocks-2.jpg","alt":"","srcset":"/temp/content-blocks-2.jpg 1x,/temp/content-blocks-2@2x.jpg 2x"}'></span>
<noscript><img src="/temp/content-blocks-2.jpg" alt="" srcset="/temp/content-blocks-2.jpg 1x,/temp/content-blocks-2@2x.jpg 2x"></noscript>
</div>
</div>
</div>
<div class="content-block-content">
<div class="content-block-content-inner">
<h2 class="heading heading--secondary">On the road</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 consequat</p>
</div>
</div>
</div>
</section>
</div>
<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>
<article 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>
</article>
</div>
<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>
<article 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>
</article>
{% for module in pageModules %}
{% include '@' ~ module.type with module.content only %}
{% endfor %}
{
"title": "Clever",
"siteHeader": {
"siteUrl": "../../components/preview/home.html",
"primaryNavigation": {
"primaryNavigationItems": [
{
"title": "Products",
"url": "../../components/preview/products.html"
},
{
"title": "How It Works",
"url": "../../components/preview/article.html"
},
{
"title": "Car Guide",
"url": "../../components/preview/car-guide.html"
},
{
"title": "Customer Service",
"url": "#"
},
{
"title": "Webshop",
"url": "#"
}
]
}
},
"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": "green",
"heroModifiers": [
"campaign-headline"
],
"heroMedia": {
"url": "/temp/hero-example-3.jpg",
"retina": true,
"width": 1440,
"height": 800,
"lazyload": true,
"sizes": [
{
"url": "/temp/hero-example-3.jpg"
},
{
"url": "/temp/hero-example-3@2x.jpg"
}
]
},
"heroSubheading": null,
"heroHeading": "Driving on the bright side",
"heroBody": null
}
},
{
"type": "banner",
"content": {
"bannerModifiers": [],
"bannerCaption": "Find us wherever you go",
"bannerHeading": "Enjoy the ride and leave<br>the charging to us",
"childComponents": []
}
},
{
"type": "content-blocks",
"content": {
"contentBlocks": [
{
"media": {
"type": "image",
"columnSize": 9,
"content": {
"url": "/temp/content-blocks-1.jpg",
"width": 489,
"height": 664,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/content-blocks-1.jpg"
},
{
"url": "/temp/content-blocks-1@2x.jpg"
}
]
}
},
"content": {
"heading": "At home",
"body": "<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 consequat</p>"
}
},
{
"media": {
"type": "image",
"columnSize": null,
"content": {
"url": "/temp/content-blocks-2.jpg",
"width": 708,
"height": 800,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/content-blocks-2.jpg"
},
{
"url": "/temp/content-blocks-2@2x.jpg"
}
]
}
},
"content": {
"heading": "On the road",
"body": "<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 consequat</p>"
}
}
]
}
},
{
"type": "charging-stations-teaser",
"content": {
"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": "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"
}
]
}
},
{
"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"
}
]
}
}
]
]
}
}
],
"pageModifiers": []
}
No notes defined.