“Sticky Bottom” Component

⚠️ This page uses default app lay out demo the sticky footers real behavior.

Design: zeplin.

Overview

The sticky bottom bar is used to place important call to actions so that they remain within the viewport on scroll. They are initially hidden from view and slide into the bottom of the screen when the user scrolls on the page.

They should be used sparingly because they take up persistent screen space.

Bunch of extra text to demo sticky bottom functionality

Bottom Anchor (button from the sticky bar should scroll fo it)

This is a Sticky Bottom component

Scroll to the bottom

Usage

@component('components.stickyToBottomContainer')
    <div class="stickyToBottom__container">
        <p class="stickyToBottom__text">This is a Sticky Bottom component</p>
        <div class="stickyToBottom__buttonContainer">
            <a href="#bottom-anchor" class="button button--secondary">
                Scroll to the bottom
            </a>
        </div>
    </div>
@endcomponent