<header role="banner">
<div class="topbar">
<div class="container">
<div class="topbar__inner">
<div class="topbar__logo">
<img class="logo" src="../../dist/images/logo.svg">
</div>
<div class="topbar__navigation">
<div class="topbar__navigation-flex">
<div class="topbar__navigation-secondary">
More at <a href="https://github.com/Novicell/novicell-pattern-library" title="github.com/Novicell/novicell-pattern-library" target="" class="link " property="url">github.com/Novicell/novicell-pattern-library</a>
</div>
<div class="topbar__navigation-primary">
<nav class="nav-main" role="navigation" vocab="http://schema.org/" typeof="SiteNavigationElement">
<ul class="nav-main-list">
<li class="nav-main-list__item ">
<a href="#" title="Home" target="" class="link " property="url">Home</a>
</li>
<li class="nav-main-list__item nav-main-list__item--active">
<a href="#" title="Get started" target="" class="link true " property="url">Get started</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
</ul>
</nav>
<div class="topbar__navigation-search">
<input class="input " type="search" name="search-input" id="search-id" placeholder="Search" />
</div>
</div>
</div>
</div>
<div class="nav-main-mobile">
<button class="mobile-navigation-button hamburger hamburger--squeeze" id="js-mobile-navigation-button" type="button">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
<span class="hamburger-label js-hamburger-label" data-menu-text="Menu" data-close-text="Close">Menu</span>
</button>
</div>
</div>
</div>
</div>
</header>
<div class="aos-wrapper" data-aos="zoom-out" data-aos-offset="" data-aos-delay="1000" data-aos-duration="1500" data-aos-easing="" data-aos-mirror="" data-aos-once="" data-aos-anchor-placement="">
<div class="pageheader-image-alt" style="background-image: url(../../dist/images/hero--mona-eendra-313518.jpg )">
<div class="pageheader-image-alt__inner">
<h1 class="pageheader-image-alt__heading">
Novicell Design System
</h1>
</div>
</div>
</div>
<div class="aos-wrapper" data-aos="fade-right" data-aos-offset="" data-aos-delay="200" data-aos-duration="" data-aos-easing="" data-aos-mirror="" data-aos-once="" data-aos-anchor-placement="">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<article class="text-box text-box--centered">
<div class="text-box__inner">
<div class="text-box__content">
<h2 class="heading heading--column ">Atomic design</h2>
<p>The Pattern Library is based on the Atomic Design method by Brad Frost.</p>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-6">
<article class="text-box text-box--centered">
<div class="text-box__inner">
<div class="text-box__content">
<h2 class="heading heading--column ">Frontend Package</h2>
<p>Build using our own tools and best practices for building websites.</p>
</div>
</div>
</article>
</div>
</div>
<div class="row center-sm">
<div class="col-xs-12 col-sm-6">
<article class="text-box text-box--centered">
<div class="text-box__inner">
<div class="text-box__content">
<h2 class="heading heading--column ">Pattern Library tool</h2>
<p>The Pattern Library is build using Clearlefts tool Fractal.</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
<div class="aos-wrapper" data-aos="fade-left" data-aos-offset="" data-aos-delay="200" data-aos-duration="1000" data-aos-easing="" data-aos-mirror="" data-aos-once="true" data-aos-anchor-placement="">
<div class="pageheader-image" style="background-image: url(../../dist/images/hero--mona-eendra-313518.jpg )">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="pageheader-image__inner">
<div class="pageheader-content">
<h1 class="heading-page heading-page--pageheader ">Novicell defaultpakke</h1>
<p class="paragraph paragraph--pageheader ">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
<button type="button" class="button button--large">
See more
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aos-wrapper" data-aos="flip-up" data-aos-offset="" data-aos-delay="" data-aos-duration="" data-aos-easing="" data-aos-mirror="" data-aos-once="" data-aos-anchor-placement="">
<section>
<div class="container">
<div class="row">
<div class="col-xs-4">
<article class="icon-box ">
<div class="icon-box__inner">
<div class="icon-box__content">
<div class="icon-box__icon">
<svg class="svg-icon ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-shop"></use>
</svg> </div>
<h2 class="heading heading--column ">Shop online</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
<a href="#shop" title="Go to shop" target="" class="link " property="url">Go to shop</a>
</div>
</article>
</div>
<div class="col-xs-4">
<article class="icon-box ">
<div class="icon-box__inner">
<div class="icon-box__content">
<div class="icon-box__icon">
<svg class="svg-icon ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-credit-card"></use>
</svg> </div>
<h2 class="heading heading--column ">Secure payment</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
<a href="#payment" title="More about payment" target="" class="link " property="url">More about payment</a>
</div>
</article>
</div>
<div class="col-xs-4">
<article class="icon-box ">
<div class="icon-box__inner">
<div class="icon-box__content">
<div class="icon-box__icon">
<svg class="svg-icon ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-box"></use>
</svg> </div>
<h2 class="heading heading--column ">Free delivery</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
<a href="#delivery" title="Buy now" target="" class="link " property="url">Buy now</a>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
<footer role="contentinfo" class="footer">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<h2 class="heading heading--footer ">Footer header</h2>
<p class="paragraph ">Novicell Aarhus<br>Søren Nymarks Vej 6<br>8270 Højbjerg,<br>Denmark</p>
<ul class="social-media-list">
<li class="social-media-list__item">
<div class="social-link social-link--twitter ">
<a href="#" title="Twitter link" target="_blank">
<svg class="social-link__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-twitter"></use>
</svg>
</a>
</div>
</li>
<li class="social-media-list__item">
<div class="social-link social-link--google-plus ">
<a href="#" title="Google Plus link" target="_blank">
<svg class="social-link__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-google-plus"></use>
</svg>
</a>
</div>
</li>
<li class="social-media-list__item">
<div class="social-link social-link--facebook ">
<a href="#" title="Facebook link" target="_blank">
<svg class="social-link__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-facebook"></use>
</svg>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<h2 class="heading heading--footer ">Footer header</h2>
<ul class="link-list ">
<li class="link-list__item">
<a href="#" title="Link title 1" target="" class="link " property="url">Link text 1</a>
</li>
<li class="link-list__item">
<a href="#" title="Link title 2" target="" class="link " property="url">Link text 2</a>
</li>
<li class="link-list__item">
<a href="#" title="Link title 3" target="" class="link " property="url">Link text 3</a>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4">
<h2 class="heading heading--footer ">Send us your inquiry</h2>
<div class="form-field ">
<label class="label " for="">
Text label
</label>
<input class="input " type="text" name="text-input" id="text-id" placeholder="Insert text" />
</div>
<div class="form-field ">
<label class="label " for="">
Email label
</label>
<input class="input " type="email" name="email-input" id="email-id" placeholder="Insert e-mail" />
</div>
<div class="form-field ">
<label class="label " for="">
Textarea label
</label>
<textarea class="textarea " name="text-input" id="text-id" placeholder="Insert text"></textarea>
</div>
<button type="button" class="button button--gradient">
gradient
</button>
</div>
</div>
</div>
</footer>
{{ render '@header' }}
{{#embed "@animate-on-scroll-wrapper" animation="zoom-out" duration="1500" delay="1000"}}
{{#content "aos-wrapper-content"}}
{{ render '@pageheader-image-alt'}}
{{/content}}
{{/embed}}
{{#embed "@animate-on-scroll-wrapper" animation="fade-right" delay="200"}}
{{#content "aos-wrapper-content"}}
{{ render '@about-boxes'}}
{{/content}}
{{/embed}}
{{#embed "@animate-on-scroll-wrapper" animation="fade-left" duration="1000" delay="200" once="true"}}
{{#content "aos-wrapper-content"}}
{{ render '@pageheader-image'}}
{{/content}}
{{/embed}}
{{#embed "@animate-on-scroll-wrapper" animation="flip-up"}}
{{#content "aos-wrapper-content"}}
{{ render '@icon-boxes'}}
{{/content}}
{{/embed}}
{{ render '@footer' }}
/* No context defined for this component. */
There are no notes for this item.