Component Library

Pageheader - dots 

<div class="pageheader-color-box">
    <div class="pageheader-dot-box">
        <div class="pageheader-main-wrapper">
            <div class="pageheader-text-container">
                <p class="pageheader-text-container__top-heading">Welcome to</p>
                <div id="pageheader-scene">
                    <p data-depth="0.2" class="pageheader-text-container__main-heading">
                        Novicell<br>Design<br>System
                    </p>
                    <p data-depth="0.6" class="pageheader-text-container__main-heading_shadow">
                        Novicell<br>Design<br>System
                    </p>
                </div>
                <p class="pageheader-text-container__sub-heading">Explore our component library in the lefthand menu</p>
            </div>
        </div>
    </div>
</div>
 
<div class="pageheader-color-box">
    <div class="pageheader-dot-box">
        <div class="pageheader-main-wrapper">
            <div class="pageheader-text-container" >
                <p class="pageheader-text-container__top-heading">{{header.top}}</p>
                <div id="pageheader-scene" > 
                    <p data-depth="0.2" class="pageheader-text-container__main-heading">
                        {{{header.main}}}
                    </p>
                    <p data-depth="0.6" class="pageheader-text-container__main-heading_shadow">
                        {{{header.main}}}
                    </p>
                </div>
                <p class="pageheader-text-container__sub-heading">{{header.sub}}</p>
            </div>
        </div>
    </div>
</div>
 
{
  "header": {
    "top": "Welcome to",
    "main": "Novicell<br>Design<br>System",
    "sub": "Explore our component library in the lefthand menu"
  }
}
  • Content: 
    .pageheader-dot-box {
    top: 0;
    z-index: 1;
    width: 100%;
    background: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        transparent;
    background-size: 40px 40px;
    height: 100vh;
}

.pageheader-color-box {
    background-color: color-mod(
        var(--color-blackberry) alpha(var(--hero-content-opacity))
    );
    width: 100%;
    height: 100vh;
}

.pageheader-main-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10%;

    @media (--viewport-xs-max) {
        padding-left: 0;
        justify-content: center;
    }
}

.pageheader-text-container {
    color: var(--color-white);
    font-family: var(--heading-font-family);

    .pageheader-text-container {
        &__top-heading {
            font-size: 22px;
            margin: 0px;
            margin-bottom: 8px;
        }

        &__main-heading {
            font-weight: 800;
            font-size: 65px;
            line-height: 62px;
            margin: 0px;
            /* text-shadow: 35px -8px rgba(000, 000, 000, 0.2); */
        }

        &__main-heading_shadow {
            z-index: -1;
            font-weight: 800;
            font-size: 65px;
            line-height: 62px;
            margin: 20px;
            position: relative;
            color: rgba(000, 000, 000, 0.2);
        }

        &__sub-heading {
            font-size: 18px;
            font-weight: 300;
            max-width: 250px;
            margin-left: 100px;
            margin-top: 30px;

            @media (--viewport-xs-max) {
                margin-left: 50px;
            }
        }
    }
}
  • URL: /components/raw/pageheader-dots/pageheader-dots.css
  • Filesystem Path: src/03-organisms/pageheaders/pageheader-dots/pageheader-dots.css
  • Size: 1.6 KB
  • Content: 
    import Parallax from 'parallax-js';
/**
 * @name Novicell pageheader-dots
 * @desc Paralax.js, parallax.js reacts to the orientation of your smart device
 *       http://matthew.wagerfield.com/parallax/
 * @author Mark Hansen MGH
 * @requires https://github.com/wagerfield/parallax
 */

function prlx() {
  const scene = document.getElementById('pageheader-scene');
  if (!scene) {
    return;
  }
  /* eslint-disable no-new */
  new Parallax(scene);
}

prlx();
  • URL: /components/raw/pageheader-dots/pageheader-dots.js
  • Filesystem Path: src/03-organisms/pageheaders/pageheader-dots/pageheader-dots.js
  • Size: 462 Bytes
  • Handle: @pageheader-dots
  • Preview:
  • Filesystem Path: src/03-organisms/pageheaders/pageheader-dots/pageheader-dots.hbs

There are no notes for this item.