Clever Component Library

Preview 

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="utf-8">
    <title> | Preview Layout</title>
    <script>
        document.documentElement.className = document.documentElement.className.replace(/(\s|^)no-js(\s|$)/, '$1js$2');
        window.isTouch = !!("ontouchstart" in window);
        if (!window.isTouch) {
            document.documentElement.className += " no-touch";
        }
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="/assets/css/main.css">
    <style>
        /* Reset vertical rhythm and site gutter for single components */
        body>script+* {
            margin: 0;
        }
    </style>
</head>

<body itemscope itemtype="http://schema.org/WebPage">
    <div class="site-canvas">
        <header class="site-header" role="banner">
            <div class="site-header-inner">
                <a href="" class="site-logo" title="Home">
                    <div class="logo">
                        <span class="svg-container" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.2 150">
                                <path d="M188.8 1.9h15.4v137.9h-15.4zM70.8 126.1c-30.5 0-55.3-24.7-55.3-55.3s24.7-55.3 55.3-55.3c14.6 0 27.9 5.7 37.8 15l10.8-11.2C106.8 7.4 89.7 0 70.8 0 31.7 0 0 31.7 0 70.8s31.7 70.8 70.8 70.8c19.2 0 36.6-7.6 49.3-20l-10.9-11.1c-9.9 9.7-23.4 15.6-38.4 15.6zM629.4 42.3c-29.1 0-49.9 21-49.9 49.7 0 29.1 21 49.7 51.8 49.7 23.5 0 36.6-10.3 40.9-14.8l-9.2-11.3c-3 2.6-12.9 12-31.5 12-19.9 0-34-11.6-36.4-29.8h83.7c.2-1.9.4-3.6.4-5.8-.1-28.7-20.5-49.7-49.8-49.7zM595.2 85c2.8-17.5 16.1-28.7 34.2-28.7 18.2 0 31.5 11.1 34.2 28.7h-68.4zM324.7 42.3c-29.1 0-49.9 21-49.9 49.7 0 29.1 21 49.7 51.8 49.7 23.5 0 36.6-10.3 40.9-14.8l-9.2-11.3c-3 2.6-12.9 12-31.5 12-19.9 0-34-11.6-36.4-29.8H374c.2-1.9.4-3.6.4-5.8 0-28.7-20.4-49.7-49.7-49.7zM290.5 85c2.8-17.5 16.1-28.7 34.2-28.7 18.2 0 31.5 11.1 34.2 28.7h-68.4zM799.9 42.3c-15.6 0-30.4 12.6-35.4 25.4V44.1h-15.4v95.7h15.4V98.7c0-23.2 12.4-41.8 34.2-41.8 5.2 0 8.9.6 13.4 2V43.8c-3.4-.8-6.4-1.5-12.2-1.5zM477.2 118.4l-35.6-74.3h-16.9L477.1 150l52.5-105.9h-16.7z" />
                            </svg>
                        </span>
                    </div>
                </a>

                <nav class="primary-navigation js-primary-navigation" aria-label="Primary Navigation" role="navigation">
                    <ul id="primary-navigation-list" class="primary-navigation-list" role="menu">
                    </ul>
                </nav>
            </div>
        </header>

        <main id="content" class="content-main">

        </main>

        <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"></h3>
                        <h4 class="heading heading--small newsletter-signup-heading"></h4>
                    </header>

                    <form class="newsletter-signup-form" action="" method="post" data-endpoint="">
                        <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></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">
                            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">
                            </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">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <script src="/assets/js/main.js"></script>
</body>

</html>
 
{% extends '_preview.twig' %}

{% block content %}
	<div class="site-canvas{% if _target.context.pageModifiers %} {{ _target.context.pageModifiers|join(' ') }}{% endif %}">
		{% include '@site-header' with _target.context.siteHeader %}

		<main id="content" class="content-main">
			{{ yield }}
		</main>

		{% include '@site-footer' with _target.context.siteFooter %}
	</div>
{% endblock %}
 
/* No context defined. */

No notes defined.