Prototyping Demo

All patterns 

<section>
    <div class="pageheader-dots">
        <div class="pageheader-dots__back">← <a href="/">Back to the Design System</a></div>
        <div class="pageheader-dots__dots">
            <div class="pageheader-dots__wrapper">
                <div class="pageheader-dots__container">
                    <p class="pageheader-dots__top-heading">This is an example page</p>
                    <div id="js-pageheader-scene">
                        <p data-depth="0.2" class="pageheader-dots__main-heading">
                            Scroll down and take<br>a look at the examples.
                        </p>
                        <p data-depth="0.6" class="pageheader-dots__main-heading-shadow">
                            Scroll down and take<br>a look at the examples.
                        </p>
                    </div>
                    <p class="pageheader-dots__sub-heading">Disclaimer: This is not a complete framework, but a clean boilerplate with a few examples that you can build upon.</p>
                    <div class="pageheader-dots__button">

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="container">
        <div class="container">
            <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="text-box__heading">Getting started</h2>
                                <p>We recommend taking a look at <a href="http://atomicdesign.bradfrost.com/" target="">Atomic Design</a> by Brad Frost and <a href="https://fractal.build/" target="">Fractal</a> for better understanding of the method and
                                    principles.<br></br>For getting started with development, take a look and follow the steps in the <a href="https://github.com/Novicell/novicell-frontend/blob/master/README.md" target="">Novicell Frontend README</a>.<br><br>Below
                                    you will find examples of some of the patterns in this demo.</p>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="container">
        <h1 class="heading-page  ">About boxes</h1>
        <hr>
        <p class="paragraph  ">This is an <i>organism</i> using the <a href="text-box"><b>text-box</b></a> <i>molecule</i>.</p>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <article class="text-box ">
                    <div class="text-box__inner">
                        <div class="text-box__content">
                            <h2 class="text-box__heading">Atomic design</h2>
                            <p>The Pattern Library is based on the Atomic Design method by Brad Frost.</p>
                        </div>
                        <a href="http://atomicdesign.bradfrost.com/" title="Link title" target="_blank" class="link" property="url">Link text</a>
                    </div>
                </article>
            </div>
            <div class="col-xs-12 col-sm-6">
                <article class="text-box ">
                    <div class="text-box__inner">
                        <div class="text-box__content">
                            <h2 class="text-box__heading">Novicell Design System</h2>
                            <p>Build using our own tools and best practices for building websites.</p>
                        </div>
                        <a href="https://github.com/Novicell/novicell-frontend" title="Link title" target="_blank" class="link" property="url">Link text</a>
                    </div>
                </article>
            </div>
        </div>
    </div>

</section>
<section>
    <div class="container">
        <h1 class="heading-page  ">Primary boxes</h1>
        <hr>
        <p class="paragraph  ">Another <i>organism</i> using the <a href="box-image"><b>box-image</b></a> <i>molecule</i>.</p>
    </div>
    <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&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;9893bc89e46e2b77a5d8c091fbba04e9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1955&amp;q&#x3D;80);">
                        <div class="box-image__content">
                            <h2 class="box-image__heading">Box Image 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&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;9893bc89e46e2b77a5d8c091fbba04e9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1955&amp;q&#x3D;80);">
                        <div class="box-image__content">
                            <h2 class="box-image__heading">Box Image 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&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;9893bc89e46e2b77a5d8c091fbba04e9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1955&amp;q&#x3D;80);">
                        <div class="box-image__content">
                            <h2 class="box-image__heading">Box Image header</h2>
                            <p>Box Image content.</p>
                        </div>
                    </div>
                </article>

            </div>
        </div>
    </div>

</section>
<section>
    <div class="container">
        <h1 class="heading-page  ">List page</h1>
        <hr>
        <p class="paragraph  ">Another <i>organism</i> using the <a href="list-page-item--card"><b>list-page-item--card</b></a> <i>molecule</i>.</p>
    </div>
    <div class="container">
        <div class="list-page">
            <div class="list-page-item list-page-item--card">
                <a href="/" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://picsum.photos/600/300?image&#x3D;0" data-query-obj='{"mode":"crop", "quality":"70", "center": "0.8,0.3"}'>
    </a>
                <div class="list-page-item__content">
                    <h2 class="list-page-item__headline">
                        Headline
                    </h2>
                    usu graeci debitis ea, impetus accusamus eam ad. Cu inimicus molestiae quo, at per iusto tritani eruditi.

                    <a class="list-page-item__link" href="/">
            /
        </a>
                </div>
            </div>
            <div class="list-page-item list-page-item--card">
                <a href="/" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://picsum.photos/600/300?image&#x3D;0" data-query-obj='{"mode":"crop", "quality":"70", "center": "0.8,0.3"}'>
    </a>
                <div class="list-page-item__content">
                    <h2 class="list-page-item__headline">
                        Headline
                    </h2>
                    usu graeci debitis ea, impetus accusamus eam ad. Cu inimicus molestiae quo, at per iusto tritani eruditi.

                    <a class="list-page-item__link" href="/">
            /
        </a>
                </div>
            </div>
            <div class="list-page-item list-page-item--card">
                <a href="/" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://picsum.photos/600/300?image&#x3D;0" data-query-obj='{"mode":"crop", "quality":"70", "center": "0.8,0.3"}'>
    </a>
                <div class="list-page-item__content">
                    <h2 class="list-page-item__headline">
                        Headline
                    </h2>
                    usu graeci debitis ea, impetus accusamus eam ad. Cu inimicus molestiae quo, at per iusto tritani eruditi.

                    <a class="list-page-item__link" href="/">
            /
        </a>
                </div>
            </div>
        </div>
    </div>

</section>
 
<section>
    {{render '@pageheader-dots' pageheaderDots }}
</section>
<section>
    <div class="container">
        {{render '@intro-box' }}
    </div>
</section>
<section>
    <div class="container">
        {{> '@heading-page' aboutBoxes }}
        <hr>
        {{> '@paragraph' aboutBoxesParagraph }}
    </div>
    {{render '@about-boxes' }}
</section>
<section>
    <div class="container">
        {{> '@heading-page' primaryBoxes }}
        <hr>
        {{> '@paragraph' primaryBoxesParagraph }}
    </div>
    {{render '@primary-boxes' }}
</section>
<section>
    <div class="container">
        {{> '@heading-page' listPage }}
        <hr>
        {{> '@paragraph' listPageParagraph }}
    </div>
    {{render '@list-page' }}
</section>
 
{
  "pageheaderDots": {
    "pageHeader": {
      "top": "This is an example page",
      "main": "Scroll down and take<br>a look at the examples.",
      "sub": "Disclaimer: This is not a complete framework, but a clean boilerplate with a few examples that you can build upon."
    }
  },
  "aboutBoxes": {
    "text": "About boxes"
  },
  "aboutBoxesParagraph": {
    "text": "This is an <i>organism</i> using the <a href=\"text-box\"><b>text-box</b></a> <i>molecule</i>."
  },
  "primaryBoxes": {
    "text": "Primary boxes"
  },
  "primaryBoxesParagraph": {
    "text": "Another <i>organism</i> using the <a href=\"box-image\"><b>box-image</b></a> <i>molecule</i>."
  },
  "listPage": {
    "text": "List page"
  },
  "listPageParagraph": {
    "text": "Another <i>organism</i> using the <a href=\"list-page-item--card\"><b>list-page-item--card</b></a> <i>molecule</i>."
  }
}