Skip to main content

Site Header

Component status:Beta

Header Variants#

White (default)#

Office of
Learning Relations Excellence
Additional text or site slogan
<header id="masthead" class="bux-header bux-header--white">
<div class="bux-container bux-grid bux-grid--header">
<div class="bux-header__col bux-header__col--left bux-grid__cell bux-grid__cell--12 bux-grid__cell--8@md bux-grid__cell--9@xl">
<div class="bux-header__site-name-container">
<div class="bux-header__site-name-prefix">
Office of
</div>
<div class="bux-header__site-name">
Unit Name Goes Here as Heading
</div>
</div>
</div>
<div class="bux-header__col bux-header__col--right bux-grid__cell bux-grid__cell--12 bux-grid__cell--4@md bux-grid__cell--3@xl">
<div class="bux-header__content-right">
<div class="bux-header__site-slogan">
Additional text or site slogan
</div>
<div class="bux-header__site-search">
<form action="/search-results" id="site-search" class="bux-search">
<label class="bux-search__label visually-hidden" for="search-input"> Search this site</label>
<input id="search-input" class="bux-search__input" type="search" placeholder="Search this site">
<button class="bux-search__submit"><span class="visually-hidden">Submit search</span></button>
</form>
</div>
</div>
</div>
</div>
</header>

Dark#

Office of
Learning Relations Excellence
Additional text or site slogan
<header id="masthead" class="bux-header bux-header--dark">