Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<script async src="dist/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="dist/byu-theme-components.min.css" media="all">
<!-- <link rel="stylesheet" href="">-->
<!-- <script async src=""></script>-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
body {
height: 100%;
.containing-element {
display: flex;
flex-direction: column;
height: 100%;
.page-content {
flex-grow: 1;
font-family: 'Public Sans', Arial, sans-serif;
<title>BYU Theme Components</title>
<div class="containing-element">
<byu-header constrain>
<!-- <byu-breadcrumbs slot="breadcrumbs">-->
<!-- <a href="#">College of Fine Arts and Communication</a>-->
<!-- <a href="#">School of Music</a>-->
<!-- </byu-breadcrumbs>-->
<span slot="site-title">Demo Site</span>
<!-- <span slot="site-title" class="subtitle">Example Sub-Title</span>-->
<a slot="actions" href="" target="_blank">Apply</a>
<byu-user-info slot="user">
<a slot="login" href="#login">Sign In</a>
<a slot="logout" href="#logout">Sign Out</a>
<byu-search slot="search">
<input type="search" placeholder="Nested Search">
<byu-menu slot="nav" active-selector=".is-active">
<a class="is-active" href="javascript: void 0">Link 1</a>
<a href="javascript: void 0">Link 2</a>
<a href="javascript: void 0">Link 3</a>
<div class="page-content">
<p>This is the page.</p>
<script type="text/javascript" lang="javascript">
// this code is used to test that the "slot change" event on byu-user-info
// actually fires correctly
window.setTimeout(() => {
var userInfo = document.getElementsByTagName('byu-user-info')[0];
const el = document.createElement('span');
el.setAttribute('slot', 'user-name');
el.innerText = 'Cosmo';
}, 3000);
<span slot="header">Contact</span>
BYU Speeches
<br> 701 East University Parkway
<br> Provo, Utah 84602
<br> 888-888-8888
<a href="" slot="actiontext">GIVE to Speeches</a>
<span slot="header">Affiliated Speeches</span>
<a href="">BYU-Idaho Speeches</a>
<a href="">BYU-Hawaii Speeches</a>
<a href="">Women's Conference</a>
<a href="">Kennedy Center Lectures</a>
<a href="">Wheatley Institution</a>
<span slot="header">Related Links</span>
<a>BYU Alumni</a>
<a>BYU Today</a>
<a>BYU Magazine</a>
<span slot="header">Connect With Us</span>
<a>Follow BYU Speeches</a>
<!--Note: These all have text that will be hidden. The text should be there to help screen readers.-->
<a class="facebook" href="">Facebook</a>
<a class="instagram" href="">Instagram</a>
<a class="twitter" href="">Twitter</a>
<a class="linkedin" href="">Linkedin</a>
<a class="youtube" href="">YouTube</a>