Web Docs

Styles: Light (with button and sign-in) 

<header role="banner" class="byu-header byu-header-light byu-nav-light">
    <div class="byu-site-banner">

        <a class="byu-link" href="https://byu.edu">
            <span class="visually-hidden">BYU</span>
        </a>

        <div class="byu-titles">

            <h1 class="byu-site-title">
                <a href="/">Physical &amp; Mathematical Sciences</a>
            </h1>

            <button class="byu-menu-button" aria-expanded="false">Menu</button>

        </div>

        <div class="byu-action-id-search">

            <form class="byu-search" action="/">
                <label class="byu-search-label" for="site-search">Search</label>
                <input type="search" id="byu-site-search" name="q" aria-label="Site search" placeholder="Search">
                <button class="byu-search-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <style>.st{stroke-width:10;fill:none;stroke:currentColor;stroke-linecap:round;}</style>
                        <circle class="st" cx="45.5" cy="45.5" r="24.5"/><path class="st" d="M63 63l16 16"/>
                    </svg>
                </button>
            </form>

            <div class="byu-id">
                <a class="byu-netID" href="https://my.byu.edu">pparker</a>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="currentcolor" d="M50 95c-26 0-34-18-34-18 3-12 8-18 17-18 5 5 10 7 17 7s12-2 17-7c9 0 14 6 17 18 0 0-7 18-34 18z"/><circle cx="50" cy="50" r="45" fill="none" stroke="currentcolor" stroke-width="10"/><circle fill="currentcolor" cx="50" cy="40" r="20"/></svg>
                <a class="byu-cas cas-signout" href="http://cas.byu.edu/cas/logout">Sign out</a>

            </div>

            <div class="byu-action-btn"><a href="//donate.byu.edu">Donate</a></div>

        </div>
    </div>

    <nav class="byu-site-navigation">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/programs">Majors &amp; Programs</a></li>
            <li><a href="/students">Students</a></li>
            <li><a href="/alumni">Alumni</a></li>
            <li><a href="/giving">Giving</a></li>
        </ul>
    </nav>

</header>
 
{{> @header }}
  • Content: 
    .byu-header-light
	.byu-link
		background-color: #fff
		background-image: url('../img/byu-monogram-navy.svg')

	.byu-site-banner
		background: #fff
		color: $byuNavy

		a, a:link, a:visited
			color: $byuNavy

	.byu-titles:before
		background: $grey10

	.byu-action-btn
		a, a:link, a:visited
			color: white

	.byu-id svg
		color: $byuNavy

	#byu-site-search
		background: $grey10


.byu-nav-dark
	.byu-site-navigation
		background: $byuNavy
		a, a:link, a:visited
			color: #fff
		a:hover, a:focus
			background: mix($byuNavy, $royalWeb, 60%)

.byu-nav-dark.byu-header-dark
	.byu-site-navigation
		background: $royalWeb
		border-top: 1px solid $byuNavy

	.byu-action-btn
		a, a:link, a:visited
			// background: $byuRoyal
			color: white
  • URL: /components/raw/header-styles/header-styles.sass
  • Filesystem Path: src/components/headers/header-styles/header-styles.sass
  • Size: 739 Bytes 
{
  "title": "Physical & Mathematical Sciences",
  "url": "/",
  "actionBtn": {
    "url": "//donate.byu.edu",
    "title": "Donate"
  },
  "search": {
    "action": "/",
    "paramName": "q"
  },
  "byuID": {
    "username": "pparker"
  },
  "nav": [
    {
      "url": "/",
      "title": "Home"
    },
    {
      "url": "/about",
      "title": "About"
    },
    {
      "url": "/programs",
      "title": "Majors & Programs"
    },
    {
      "url": "/students",
      "title": "Students"
    },
    {
      "url": "/alumni",
      "title": "Alumni"
    },
    {
      "url": "/giving",
      "title": "Giving"
    }
  ],
  "classes": "byu-header-light byu-nav-light"
}