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

BYU Theme Components

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;
            }

Using Fonts

The components already reference the font stylesheets for you, but will not style your whole page. We recommend including the following CSS in your page to apply the fonts to the rest of the page in the correct places. 


            html, body {
                font-family: 'Public Sans', 'Noto Sans', 'Open Sans', Helvetica, Arial, sans-serif;
            }
            h1, h2, h3, h4, h5, h6 {
                font-family: 'HCo Ringside Narrow SSm', 'Open Sans', Helvetica, Arial, sans-serif;
            }