Component Library

Page 

<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="container">
    <div class="row">
        <div class="col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb__item">
                    <a class="breadcrumb__link" href="#" title="Link title 1">Link text 1</a>
                </li>
                <li class="breadcrumb__item">
                    <a class="breadcrumb__link" href="#" title="Link title 2">Link text 2</a>
                </li>
                <li class="breadcrumb__item">
                    <span class="breadcrumb__link--active">Link text 3</span>
                </li>
            </ol>

            <script type="application/ld+json">
                {
                    "@context": "http://schema.org",
                    "@type": "BreadcrumbList",
                    "itemListElement": [{
                            "@type": "ListItem",
                            "position": 1,
                            "item": {
                                "@id": #,
                                "name": Link text 1
                            }
                        },
                        {
                            "@type": "ListItem",
                            "position": 2,
                            "item": {
                                "@id": #,
                                "name": Link text 2
                            }
                        },
                        {
                            "@type": "ListItem",
                            "position": 3,
                            "item": {
                                "@id": #,
                                "name": Link text 3
                            }
                        }
                    ]
                }
            </script>
            <h1 class="heading-page  ">Header Page</h1>

            <article class="text-box ">
                <div class="text-box__inner">
                    <div class="text-box__content">
                        <h2 class="heading heading--column ">Text Box header</h2>

                        <p>Text Box content.</p>
                    </div>
                </div>
            </article>
        </div>
        <div class="col-xs-12 col-sm-12" style="margin:20px 0;">
            <section class="image-text-section">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6">
                            <img data-src="../../dist/images/hero--mona-eendra-313518.jpg" alt="Image" class="image lazyload   ">
                        </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="heading heading--column ">Text Box header</h2>

                                        <p>Text Box content.</p>
                                    </div>
                                </div>
                            </article>
                            <a href="" title="" class="link-button   " property="url">button text</a>

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

        </div>
        <div class="col-xs-12 col-sm-12">
            <section class="text-image-section">
                <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="heading heading--column ">Header</h2>

                                        <p>Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet
                                            elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus.</p>
                                    </div>
                                </div>
                            </article>
                            <a href="" title="" class="link-button   " property="url">button text</a>

                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <img data-src="../../dist/images/hero--mona-eendra-313518.jpg" alt="Image" class="image lazyload   ">
                        </div>
                    </div>
                </div>
            </section>

        </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' }}
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            {{ render '@breadcrumb' }}
            {{ render '@heading-page' }}
            {{ render '@text-box'  }}
        </div>
        <div class="col-xs-12 col-sm-12" style="margin:20px 0;">
            {{ render '@image-text-section'}}
        </div>
        <div class="col-xs-12 col-sm-12">
            {{ render '@text-image-section'}} 
        </div>
    </div>
</div>

{{ render '@footer' }}
 
/* No context defined for this component. */
  • Content: 
    body.show-overlay {
    .overlay {
        opacity: 0.5;
        pointer-events: all;
    }
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-color: #000000;
    opacity: 0;
    transition: opacity 0.3s var(--easeInOutQuart);
    cursor: pointer;
    pointer-events: none;
    z-index: 3;
}
  • URL: /components/raw/page/page.css
  • Filesystem Path: src/04-pages/page/page.css
  • Size: 401 Bytes

There are no notes for this item.