<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>
<section>
<div class="pageheader-slider js-pageheader-slider">
<div class="pageheader-slider__item">
<div class="pageheader-slider__item-inner" style="background-image: url('https://images.unsplash.com/photo-1526382074123-5685fa8a6af4?ixlib=rb-0.3.5&s=94863bc0e123d3dc707563f87864eb52&auto=format&fit=crop&w=2032&q=80')">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="pageheader-content">
<h1 class="heading-page heading-page--pageheader ">Slider 1</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 class="pageheader-slider__item">
<div class="pageheader-slider__item-inner" style="background-image: url('https://images.unsplash.com/photo-1498206005704-36d87df55231?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f85ad7268a727c31aae1ac78ef399677&auto=format&fit=crop&w=1986&q=80')">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="pageheader-content">
<h1 class="heading-page heading-page--pageheader ">Slider 2</h1>
<p class="paragraph paragraph--pageheader ">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Sed porttitor lectus nibh.</p>
<button type="button" class="button button--large">
See more
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pageheader-slider__item">
<div class="pageheader-slider__item-inner" style="background-image: url('https://images.unsplash.com/photo-1483125078247-1a358ff363d3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=63dd38e6be26093f5a96e80e4ceabf24&auto=format&fit=crop&w=1950&q=80')">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="pageheader-content">
<h1 class="heading-page heading-page--pageheader ">Slider 2</h1>
<p class="paragraph paragraph--pageheader ">Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh.</p>
<button type="button" class="button button--large">
See more
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<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>
<section>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<article class="box-image">
<div class="box-image__inner" style="background-image: url(https://images.unsplash.com/photo-1492970471430-bc6bd7eb2b13?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9893bc89e46e2b77a5d8c091fbba04e9&auto=format&fit=crop&w=1955&q=80);">
<div class="box-image__content">
<h2 class="heading heading--column ">Column header</h2>
<p>Box Image content.</p>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-4">
<article class="box-image">
<div class="box-image__inner" style="background-image: url(https://images.unsplash.com/photo-1492970471430-bc6bd7eb2b13?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9893bc89e46e2b77a5d8c091fbba04e9&auto=format&fit=crop&w=1955&q=80);">
<div class="box-image__content">
<h2 class="heading heading--column ">Column header</h2>
<p>Box Image content.</p>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-4">
<article class="box-image">
<div class="box-image__inner" style="background-image: url(https://images.unsplash.com/photo-1492970471430-bc6bd7eb2b13?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9893bc89e46e2b77a5d8c091fbba04e9&auto=format&fit=crop&w=1955&q=80);">
<div class="box-image__content">
<h2 class="heading heading--column ">Column header</h2>
<p>Box Image content.</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-xs-12">
<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>
</div>
</section>
<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>
<button class="cookie-info-open" id="js-cookie-info-open">
Cookies?
</button>
<section class="cookie-info" id="js-cookie-info">
<div class="cookie-info__content">
<p class="cookie-info__text">We're using cookies on this website, is that OK with you?</p>
<button class="cookie-info__close button" id="js-cookie-info-close">Fine with me :)</button>
</div>
</section>
{{ render '@header' }}
<section>
{{ render '@pageheader-slider' }}
</section>
{{ render '@icon-boxes' }}
<section>
<div class="container">
<div class="row">
<div class="col-xs-12">
{{ render '@primary-boxes' }}
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-xs-12">
{{ render '@about-boxes' }}
</div>
</div>
</div>
</section>
{{ render '@footer' }}
{{ render '@cookie-info' }}
/* No context defined for this component. */
There are no notes for this item.