<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 class="text-image-section" style="background-color:whitesmoke">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <article class="text-box overlap-item overlap-item--above overlap-item-md--right overlap-item-lg--right">
                    <div class="text-box__inner">
                        <div class="text-box__content">
                            <h2 class="heading heading--column ">Overlapping</h2>

                            <p>This element will overlap whatever is to the right of it. By using the same modifiers on sections, you can overlap whole sections over other sections, and then overlap blocks and elements within that same section. this text-block
                                appears above the picture to the right as it also has the modifier overlap-item--above as well. If the screen is sufficiently small, it will not overlap anything</p>
                        </div>
                    </div>
                </article>
                <article class="text-box overlap-item overlap-item-xs--bottom overlap-item-sm--right overlap-item-md--right overlap-item-lg--right">
                    <div class="text-box__inner">
                        <div class="text-box__content">
                            <h2 class="heading heading--column ">Overlapping 1</h2>

                            <p>This text will go below the image to the right or below it if the screen is small. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti vero hic quidem quaerat quia ea obcaecati ad quisquam rem, tempora veniam
                                voluptatum officiis eius doloribus at magni cumque dolore nemo?</p>
                        </div>
                    </div>
                </article>
            </div>
            <div class="col-xs-12 col-sm-6">
                <img data-src="https://images.unsplash.com/photo-1500021965513-eda850f3bb4b?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;934&amp;q&#x3D;80" alt="" class="image lazyload  overlap-item overlap-item--below ">                </div>
        </div>
    </div>
</section>

<div class="overlap-item overlap-item--above overlap-item-xs--top overlap-item-sm--top overlap-item-lg--top overlap-item-xl--top" style="width:96vw; background-color:ghostwhite;">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <img data-src="https://images.unsplash.com/photo-1465325955623-a2218343bed4?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;951&amp;q&#x3D;80" alt="" class="image lazyload  overlap-item overlap-item-md--top overlap-item-lg--top ">                </div>
            <div class="col-xs-12 col-sm-6">
                <article class="text-box overlap-item">
                    <div class="text-box__inner">
                        <div class="text-box__content">
                            <h2 class="heading heading--column ">Overlapping 2</h2>

                            <p>This text-box will always show above, as it&#x27;s part of the overlapping div</p>
                        </div>
                    </div>
                </article>
                <article class="text-box overlap-item overlap-item--above overlap-item-sm--left overlap-item-md--left overlap-item-lg--left">
                    <div class="text-box__inner">
                        <div class="text-box__content">
                            <h2 class="heading heading--column ">Overlapping 3</h2>

                            <p>Note how difficult this is to read. Overlapping has to be considered with the background-color to font color contrast in mind over readability</p>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</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' }}

<section class="text-image-section" style="background-color:whitesmoke">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                {{> @text-box textbox1 modifier="overlap-item overlap-item--above overlap-item-md--right overlap-item-lg--right" }}

                {{> @text-box textbox2 modifier="overlap-item overlap-item-xs--bottom overlap-item-sm--right overlap-item-md--right overlap-item-lg--right" }}
            </div>
            <div class="col-xs-12 col-sm-6">
                {{> @image image1 modifier="overlap-item overlap-item--below" }}
            </div>
        </div>
    </div>
</section>

<div class="overlap-item overlap-item--above overlap-item-xs--top overlap-item-sm--top overlap-item-lg--top overlap-item-xl--top" style="width:96vw; background-color:ghostwhite;">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                {{> @image image2 modifier="overlap-item overlap-item-md--top overlap-item-lg--top" }}
            </div>
            <div class="col-xs-12 col-sm-6">
                {{> @text-box textbox3 modifier="overlap-item"}} 
                {{> @text-box textbox4 modifier="overlap-item overlap-item--above overlap-item-sm--left overlap-item-md--left overlap-item-lg--left"}}    
            </div>
        </div>
    </div>
</div>


{{ render '@footer' }}
{
  "image1": {
    "url": "https://images.unsplash.com/photo-1500021965513-eda850f3bb4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
  },
  "image2": {
    "url": "https://images.unsplash.com/photo-1465325955623-a2218343bed4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=951&q=80"
  },
  "textbox1": {
    "heading": {
      "text": "Overlapping"
    },
    "textBoxContent": "This element will overlap whatever is to the right of it. By using the same modifiers on sections, you can overlap whole sections over other sections, and then overlap blocks and elements within that same section. this text-block appears above the picture to the right as it also has the modifier overlap-item--above as well. If the screen is sufficiently small, it will not overlap anything"
  },
  "textbox2": {
    "heading": {
      "text": "Overlapping 1"
    },
    "textBoxContent": "This text will go below the image to the right or below it if the screen is small. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti vero hic quidem quaerat quia ea obcaecati ad quisquam rem, tempora veniam voluptatum officiis eius doloribus at magni cumque dolore nemo?"
  },
  "textbox3": {
    "heading": {
      "text": "Overlapping 2"
    },
    "textBoxContent": "This text-box will always show above, as it's part of the overlapping div"
  },
  "textbox4": {
    "heading": {
      "text": "Overlapping 3"
    },
    "textBoxContent": "Note how difficult this is to read. Overlapping has to be considered with the background-color to font color contrast in mind over readability"
  }
}

There are no notes for this item.