Footer Demo

University Footer

All sites should at least have this footer.

Sticky 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. Unfortunately due to some of the limitations of web components this can't be built into the footer component. However, you can do this with flexbox as follows:

The byu-header, page-content div, and byu-footer should all be children of the same containing element
The containing element should be have the styles height: 100%, display: flex, and flex-direction: column
The page-content div should have a style of flex-grow: 1
The height of any ancestors of the containing element should also be set to 100%.

Here's a simple example:


            <style>
                html, body {
                    height: 100%;
                }

                .containing-element {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                }

                .page-content {
                    flex-grow: 1;
                }
            </style>

            <html>
                <body>
                    <div class="containing-element">

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

                        <div class="page-content">
                            <!-- Put your site content here -->
                        </div>

                        <byu-footer></byu-footer>

                    </div>
                </body>
            </html>

Site Footer

Some sites may need to embed their own links and content in the footer. You can accomplish this by placing byu-footer-column elements in the footer, which will add a footer area above the university footer.

Double and triple-wide columns

You can have columns which span twice or three times the normal column width, using the double-wide and triple-wide classes.

Remember that the footer shifts in tablet and mobile views to stack in a 2x2 and 1x4 block. If you use a double-wide column in the middle (columns 2 & 3), it will stack strangely in tablet-width. To adjust for this, you can add the following snippet to your CSS to place your double-wide column in the second row underneath your 1st and 4th columns.


            @media (min-width: 600px) {
                byu-footer-column.double-wide {
                    order: 1;
                }

                .site-footer ::slotted(*) {
                    width: unset;
                }
            }

Social Media Links

The byu-social-media-links component displays nice, consistent icons for a list of social media links. Simply provide the links you want, with a class specifying the social network to which it belongs. byu-social-media-links will then add the appropriate icon and add a tooltip identifying the social network (unless you already have a tooltip), which aids in accessibility.

This demo includes the full list of currently-supported social media icons:

You can also add custom links. Just add a link that gets the desired icon set as the background-image, and byu-social-media-links will do the rest (SVG images work the best).

Custom Content

You don't have to use byu-footer-column inside of byu-footer. We highly recommend that you stick to using byu-footer-column, though, as it implements the official theme with no work on your part.

If you absolutely need to customize the content of your footer, you can add arbitrary content to byu-footer. Each child element will be treated and styled as a footer column.