Components v2 Demo User Sign In Sign out Home Header Menu Search User Login Footer Changes

Welcome to v2

Getting Started

Add the following to your <head>:


            <script async src="https://cdn.byu.edu/byu-theme-components/2.x.x/byu-theme-components.min.js"></script>
            <link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/2.x.x/byu-theme-components.min.css" media="all">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        

Then, add this to your page where you want the header to appear:


            <byu-header>
                <h1 slot="site-title">Your Site Title Here</h1>
            </byu-header>
        

And this where you want the footer:

<byu-footer></byu-footer>

We strongly recommend adding some code to make the footer "stick" to the bottom of the window even when there is little or no page content. A discussion of how to do this can be found on the footer docs page.

Additionaly, because the site footer is white, we suggest making the body of your application #FAFAFA. You can use the following CSS to do that:


            html, body {
                background: #FAFAFA
            }