Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<head>
<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="https://cdn.byu.edu/byu-theme-components/2.x.x/byu-theme-components.min.css">-->
<!-- <script async src="https://cdn.byu.edu/byu-theme-components/2.x.x/byu-theme-components.min.js"></script>-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
height: 100%;
}
.containing-element {
display: flex;
flex-direction: column;
height: 100%;
}
.page-content {
flex-grow: 1;
font-family: 'Public Sans', Arial, sans-serif;
}
</style>
<title>BYU Theme Components</title>
</head>
<body>
<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="https://www.byu.edu/" 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-user-info>
<byu-search slot="search">
<input type="search" placeholder="Nested Search">
</byu-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>
</byu-menu>
</byu-header>
<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';
userInfo.appendChild(el);
}, 3000);
</script>
</div>
<byu-footer>
<byu-footer-column>
<span slot="header">Contact</span>
<p>
BYU Speeches
<br> 701 East University Parkway
<br> Provo, Utah 84602
<br> 888-888-8888
</p>
<byu-footer-action-button>
<a href="https://www.google.com" slot="actiontext">GIVE to Speeches</a>
</byu-footer-action-button>
</byu-footer-column>
<byu-footer-column>
<span slot="header">Affiliated Speeches</span>
<a href="https://www.byui.edu">BYU-Idaho Speeches</a>
<a href="https://www.byuh.edu">BYU-Hawaii Speeches</a>
<a href="https://womensconference.byu.edu">Women's Conference</a>
<a href="https://kennedy.byu.edu/lectures">Kennedy Center Lectures</a>
<a href="https://wheatley.byu.edu/">Wheatley Institution</a>
</byu-footer-column>
<byu-footer-column>
<span slot="header">Related Links</span>
<a>LDS.org</a>
<a>BYU Alumni</a>
<a>BYU Today</a>
<a>BYU Magazine</a>
</byu-footer-column>
<byu-footer-column>
<span slot="header">Connect With Us</span>
<a>Feedback</a>
<a>Help</a>
<a>Follow BYU Speeches</a>
<byu-social-media-links>
<!--Note: These all have text that will be hidden. The text should be there to help screen readers.-->
<a class="facebook" href="https://www.facebook.com">Facebook</a>
<a class="instagram" href="https://www.instagram.com">Instagram</a>
<a class="twitter" href="https://www.twitter.com">Twitter</a>
<a class="linkedin" href="https://www.linkedin.com">Linkedin</a>
<a class="youtube" href="https://www.youtube.com">YouTube</a>
</byu-social-media-links>
</byu-footer-column>
</byu-footer>
</div>
</body>
</html>