Files

• _billboard.scss
• billboard.js
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/billboard

Module Overview

The billboard is the top section of the theme which contains the page title, background image and other information about the current page. This may also be known as the 'hero' section.

Examples

<div class="billboard">
    <div class="billboard_wrapper container">
        ...
    </div>
</div>

View Demo

Full-Screen

<div class="billboard-full-screen">
    ...
</div>

View Demo

Background Overlay

<div class="billboard-overlay">
    ...
</div>

View Demo

Video Background (+ full-screen)

Youtube

<section class="billboard-videoBg-full-screen">
    <div class="auto-resizable-iframe" data-iframe-height="56.5%">
        <div>
            <iframe allowfullscreen src="http://www.youtube.com/embed/Q3oItpVa9fs?autoplay=1">
        </div>
    </div>
</section>

View Demo

Vimeo

<section class="billboard-videoBg-full-screen">
    <div class="auto-resizable-iframe" data-iframe-height="56.5%">
        <div>
            <iframe 
            src="https://player.vimeo.com/video/87701971?autoplay=1" 
            frameborder="0" 
            webkitallowfullscreen 
            mozallowfullscreen 
            allowfullscreen></iframe>
        </div>
    </div>
</section>

View Demo

Parallax Content

<div class="billboard-full-screen">
    <div class="billboard_wrapper">
        <div id="billboard-fade-parallax">
            ...
        </div>
    </div>
</div>

Then in your theme's JS file (e.g. assets/themes/Kayzen/kayzen.js), call the billboard() function on the content container:

$('#billboard-fade-parallax').billboard();

View Demo

Customizing

The billboard can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
full-screen	false	Set whether the billboard should be full-screen without any modifiers.
overlay	false	Set whether the billboard should have an overlay without any modifiers.
bg-color	color('greyscale', 'grey-5')	The billboard background.
bg-image	""	The billboard background image.
overlay-color	color('brand', 'primary')	The color for the billboard overlay (if applicable).
overlay-opacity	0.6	The opacity for the billboard overlay (if applicable).
color	color('greyscale', 'white')	The billboard text color.
text-align	center	The alignment of the billboard content.
min-height	500px	The minimum height the billboard should occupy.

To change one of the above values, pass your new value(s) to the billboard() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include billboard((
    'icon-color' : rgba(white, 0.6),
    'title-bg'   : color('brand', 'primary')
));