Component Library

Related header 

<header class="header js-header" role="banner">
    <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="Link title 1" target="" class="link   " property="url">Link text 1</a>

            </li>
            <li class="nav-main-list__item nav-main-list__item--active">
                <a href="#" title="Link title 2" target="" class="link true  " property="url">Link text 2</a>

            </li>
        </ul>
    </nav>

    <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>

    <div class="topbar-related" id="js-topbar-related">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h5 class="topbar-related__title">Related content/header: </h5>
                    <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="Contact" target="" class="link   " property="url">Contact</a>

                            </li>
                        </ul>
                    </nav>

                </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&#x3D;rb-0.3.5&amp;s&#x3D;94863bc0e123d3dc707563f87864eb52&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2032&amp;q&#x3D;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&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;f85ad7268a727c31aae1ac78ef399677&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1986&amp;q&#x3D;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&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;63dd38e6be26093f5a96e80e4ceabf24&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1950&amp;q&#x3D;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>

<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 '@related-header' }}
<section>
    {{ render '@pageheader-slider' }}
</section>
{{ render '@icon-boxes' }}

{{ render '@footer' }}
 
/* No context defined for this component. */

There are no notes for this item.