Header

The header component allows for you to create a large call to action section. This is currently being utilized on our home page to provide a large bold headline and button for a call to action. This component will be used mostly on landing pages.

Also included in the styles is a bouncing scroll indicator. This can be included in your design as you see fit.

See the Pen Header Styles by Kyle Logue (@kylelogue) on CodePen.0

Javascript to scroll page on click:

    
        $(document).ready(function() {

            $('.scroll-down, .get-started').on('click', function(e) {
                e.preventDefault()
                $('html, body').animate({
                    scrollTop: $('section:first-of-type').offset().top
                }, 300)
            })

        })
    
Up Next: »