<footer class="site-footer js-site-footer" role="contentinfo">
<div class="newsletter-signup js-newsletter-signup" role="complementary">
<div class="newsletter-signup-inner">
<header class="newsletter-signup-header">
<h3 class="heading heading--category newsletter-signup-subheading">Join the movement</h3>
<h4 class="heading heading--small newsletter-signup-heading">EV's are here to stay</h4>
</header>
<form class="newsletter-signup-form" action="" method="post" data-endpoint="https://clever-components.fallwinter.dk/.netlify/functions/server/mailchimp">
<div class="form-group form-group--inline">
<label for="newsletter-email" class="visuallyhidden">Email address <span class="required">*</span></label>
<input id="newsletter-email" type="email" class="form-input--email" name="email" placeholder="name@email.com" required>
<button class="cta" type="submit" class="form-button">
<span class="text">Sign up</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>
</button>
<span class="underline"></span>
</div>
<div class="form-group">
<div class="form-input form-input--checkbox">
<input id="accept-policy" value="1" name="accept-policy" type="checkbox" required>
<label for="accept-policy"><span>Accept af persondatapolitik ifm. nyhedsbreve. <a href="#">Læs mere her</a></span></label>
</div>
</div>
</form>
</div>
</div>
<div class="site-footer-inner">
<div class="site-footer-columns">
<div class="site-footer-column">
<h4 class="site-footer-column-heading">
About Clever
</h4>
<nav class="site-directory">
<ul class="site-directory-list">
<li class="site-directory-item">
<a href="#">
Owners
</a>
</li>
<li class="site-directory-item">
<a href="#">
Jobs
</a>
</li>
<li class="site-directory-item">
<a href="#">
Partnerships
</a>
</li>
<li class="site-directory-item">
<a href="#">
Press
</a>
</li>
<li class="site-directory-item">
<a href="#">
Persondatapolitik
</a>
</li>
</ul>
</nav>
</div>
<div class="site-footer-column">
<h4 class="site-footer-column-heading">
Erhverv
</h4>
<nav class="site-directory">
<ul class="site-directory-list">
<li class="site-directory-item">
<a href="#">
Mindre virksomhed
</a>
</li>
<li class="site-directory-item">
<a href="#">
Større virksomhed
</a>
</li>
<li class="site-directory-item">
<a href="#">
Kommune
</a>
</li>
<li class="site-directory-item">
<a href="#">
Boligforening
</a>
</li>
<li class="site-directory-item">
<a href="#">
Flådeadministratorer
</a>
</li>
</ul>
</nav>
</div>
<div class="site-footer-column">
<h4 class="site-footer-column-heading">
Customer service
</h4>
<nav class="site-directory">
<ul class="site-directory-list">
<li class="site-directory-item">
<a href="#">
Go ladestil
</a>
</li>
<li class="site-directory-item">
<a href="#">
Lost your card?
</a>
</li>
<li class="site-directory-item">
<a href="#">
Driftstatus
</a>
</li>
<li class="site-directory-item">
<a href="#">
Tilmeld betalingsservice
</a>
</li>
<li class="site-directory-item">
<a href="#">
Local parkingrules
</a>
</li>
</ul>
</nav>
</div>
<div class="site-footer-column">
<h4 class="site-footer-column-heading">
Contact
</h4>
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name" class="visuallyhidden">
Clever
</span>
<span>
CVR-nr. 32 46 83 49
</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">
Støberigade 14, 3. sal
</span>
<span itemprop="postalCode">
2450
</span>
<span itemprop="addressLocality">
København SV
</span>
</div>
<a href="tel:+4582303030" itemprop="telephone">
+45 82 30 30 30
</a>
<a href="mailto:kundservice@clever.dk" itemprop="email">
kundservice@clever.dk
</a>
<p>
Call us today between
<br>
08:00 - 16:30
</p>
</div>
</div>
</div>
<div class="site-footer-small">
<small class="site-footer-legal">
<span class="copyright">
@
</span>
2018 Clever
</small>
<div class="site-footer-locales">
<nav class="site-locales">
<ul class="site-locales-list">
<li class="site-locales-list-item">
<a href="#">
Swe
</a>
</li>
<li class="site-locales-list-item">
<a href="#">
No
</a>
</li>
<li class="site-locales-list-item">
<a href="#">
Eng
</a>
</li>
<li class="site-locales-list-item">
<strong>
Dk
</strong>
</li>
</ul>
</nav>
</div>
<div class="site-footer-social">
<div class="social-links">
<h5 class="social-links-heading">
Follow us
</h5>
<ul class="social-links-list">
<li class="social-links-item">
<a href="#" target="_blank">
<span class="icon icon-instagram">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 169.063 169.063">
<path d="M122.406 0H46.654C20.929 0 0 20.93 0 46.655v75.752c0 25.726 20.929 46.655 46.654 46.655h75.752c25.727 0 46.656-20.93 46.656-46.655V46.655C169.063 20.93 148.133 0 122.406 0zm31.657 122.407c0 17.455-14.201 31.655-31.656 31.655H46.654C29.2 154.063 15 139.862 15 122.407V46.655C15 29.201 29.2 15 46.654 15h75.752c17.455 0 31.656 14.201 31.656 31.655v75.752z" />
<path d="M84.531 40.97c-24.021 0-43.563 19.542-43.563 43.563 0 24.02 19.542 43.561 43.563 43.561s43.563-19.541 43.563-43.561c0-24.021-19.542-43.563-43.563-43.563zm0 72.123c-15.749 0-28.563-12.812-28.563-28.561 0-15.75 12.813-28.563 28.563-28.563s28.563 12.813 28.563 28.563c0 15.749-12.814 28.561-28.563 28.561zM129.921 28.251c-2.89 0-5.729 1.17-7.77 3.22a11.053 11.053 0 00-3.23 7.78c0 2.891 1.18 5.73 3.23 7.78 2.04 2.04 4.88 3.22 7.77 3.22 2.9 0 5.73-1.18 7.78-3.22 2.05-2.05 3.22-4.89 3.22-7.78 0-2.9-1.17-5.74-3.22-7.78-2.04-2.05-4.88-3.22-7.78-3.22z" />
</svg>
</span>
</span>
<span class="text visuallyhidden">
Instagram
</span>
</a>
</li>
<li class="social-links-item">
<a href="#" target="_blank">
<span class="icon icon-facebook">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 32">
<path d="M10.7 11.8V7.5c0-.6.3-1.5 1.3-1.5h3.4V0H9.1C6.9 0 3.7 2.7 3.7 5.5v6.1H0v6h3.7V32h7V17.8h4.8l1.2-5.9h-6z" />
</svg>
</span>
</span>
<span class="text visuallyhidden">
Facebook
</span>
</a>
</li>
<li class="social-links-item">
<a href="#" target="_blank">
<span class="icon icon-linkedin">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 31.6">
<path d="M7.2 3.4c0 1.9-1.4 3.4-3.7 3.4C1.4 6.8 0 5.3 0 3.4S1.4 0 3.6 0s3.6 1.5 3.6 3.4m-7 6.1H7v22H.2v-22zm10.9 7.1c0-2.7-.1-5-.2-7h5.9l.3 3.1h.1c.9-1.4 3.1-3.6 6.8-3.6 4.5 0 7.9 3 7.9 9.5v13h-6.8V19.4c0-2.8-1-4.8-3.5-4.8-1.9 0-3 1.3-3.5 2.6-.1.4-.1 1-.1 1.7v12.7h-6.8v-15z" />
</svg>
</span>
</span>
<span class="text visuallyhidden">
LinkedIn
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<footer class="site-footer js-site-footer" role="contentinfo">
{% include '@newsletter-signup' with newsletterSignup only %}
<div class="site-footer-inner">
<div class="site-footer-columns">
{#
<div class="site-footer-column">{% include '@logo' with { logoModifier: 'icon' } %}
</div>
#}
{% for siteDirectory in siteDirectories %}
<div class="site-footer-column">
<h4 class="site-footer-column-heading">
{{ siteDirectory.title }}
</h4>
<nav class="site-directory">
<ul class="site-directory-list">
{% for link in siteDirectory.children %}
<li class="site-directory-item">
<a href="{{ link.url }}">
{{ link.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% endfor %}
<div class="site-footer-column">
<h4 class="site-footer-column-heading">
Contact
</h4>
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name" class="visuallyhidden">
Clever
</span>
<span>
CVR-nr. 32 46 83 49
</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">
Støberigade 14, 3. sal
</span>
<span itemprop="postalCode">
2450
</span>
<span itemprop="addressLocality">
København SV
</span>
</div>
<a href="tel:+4582303030" itemprop="telephone">
+45 82 30 30 30
</a>
<a href="mailto:kundservice@clever.dk" itemprop="email">
kundservice@clever.dk
</a>
<p>
Call us today between
<br>
08:00 - 16:30
</p>
</div>
</div>
</div>
<div class="site-footer-small">
<small class="site-footer-legal">
<span class="copyright">
@
</span>
2018 Clever
</small>
<div class="site-footer-locales">
<nav class="site-locales">
<ul class="site-locales-list">
{% for locale in siteLocales %}
<li class="site-locales-list-item">
{% if locale.active %}
<strong>
{{ locale.text }}
</strong>
{% else %}
<a href="{{ locale.url }}">
{{ locale.text }}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
<div class="site-footer-social">
<div class="social-links">
<h5 class="social-links-heading">
Follow us
</h5>
<ul class="social-links-list">
{% for link in socialLinks %}
<li class="social-links-item">
<a href="{{ link.url }}" target="_blank">
{% include '@icon' with { source: link.icon } %}
<span class="text visuallyhidden">
{{ link.text }}
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</footer>
{
"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
}
]
}
Purpose: Used as a secondary site navigation and a place to put contact information.
Purpose: Used as a link to the home page.
Required: Yes
Purpose: Indicated sections the items underneath belong to.
Required: Yes
Recommendations: Keep max to about 20 characters (including spaces)
Purpose: Used to direct the user to the relevant page or action.
Required: Yes
Recommendations: Keep max to about 40 characters (including spaces)
Purpose: Used to indicate the contact information.
Required: Yes
Recommendations: Keep max to about 40 characters (including spaces) per each
Purpose: Used to display legal information.
Required: Yes
Recommendations: Keep max to about 70 characters (including spacing)
Purpose: Used to indicate and let the user select the language.
Required: Yes
Purpose: Used to direct the user to the relevant page or action - in this case social media sites.
Required: Yes
Purpose: Acts as a supporting headline above.
Required: Yes
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the content next to it.
Required: Yes
Recommendations: Keep max to about 25 characters (including spaces)
Purpose: Serves as a guide of the content user needs to put in.
Required: Yes
Purpose: Informs and lets the user consent with the data politic of the site. Contains a link to the page.
Required: Yes
Recommendations: Keep max to about 70 characters (including spacing)
Purpose: Used to direct the user to the relevant page or action - in this case complete the action of signing up.
Required: Yes
Recommendations: Keep max to about 25-30 characters (including spacing)