Header - Global

When to Use

The global header is used at the top of the page. It appears on all pages. It contains a logo and may contain a search field.

For an example of the global header, sidenav and secondary nav used together, see _example-1.html.

Functionality

Not applicable.

Rendered Code

HTML

	
		
			
				
			
			
				
					
					
				
				Advanced Search

CSS

header.header-global {
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  height: 103px;
  padding: 25px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
header.header-global .container {
  margin: 0 25px;
}
header.header-global .container .logo-container {
  float: left;
  margin-top: 15px;
  width: 50%;
}
header.header-global .container .logo-container .logo-image {
  display: inline-block;
  margin-right: 50px;
  width: 140px;
}
header.header-global .container .logo-container .logo-image img {
  max-width: 280px;
  width: 100%;
}
header.header-global .container .logo-container .logo-text {
  color: #404040;
  font-size: 22px;
  line-height: 1em;
  position: relative;
  text-transform: uppercase;
  top: 5px;
  vertical-align: top;
  white-space: nowrap;
}
header.header-global .container .search-container {
  float: right;
  margin-top: 8px;
  max-width: 450px;
  width: 50%;
}
header.header-global .container .search-container > .input,
header.header-global .container .search-container > span {
  float: right;
  width: 100%;
}

JavaScript

// No JavaScript Required

Navigation - Side Navigation

When to Use

The off-canvas navigation is the main navigation for the website.

For an example of the global header, sidenav and secondary nav used together, see _example-1.html.

Functionality

The navigation sticks to the left side of the window. In its original state, the links are displayed as icons with no text. When the user clicks the open icon, the navigation opens and displays the icons with text.

Rendered Code

HTML


    
        
        Item 1
        Item 2
        Item 3
    
    Log Out

CSS

/* Menu Appearance */
.logout {
  bottom: 0;
  left: 0;
  position: absolute;
  white-space: nowrap;
  width: 100%;
}
.logout a {
  border-top: 1px #fff solid;
  color: #07A9DF;
  display: block;
  height: 55px;
  padding: 15px 15px;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}
.logout a:hover, .logout a:active {
  color: #fff;
}
.logout a .fa {
  font-size: 25px;
  margin-right: 15px;
  width: 25px;
}

.pushy {
  position: fixed;
  width: 55px;
  height: 100%;
  top: 0;
  z-index: 9999;
  background: transparent;
  margin: 0;
  /* overflow: auto; */
  /* overflow: visible; */
  overflow: hidden;
  visibility: visible;
  -webkit-overflow-scrolling: touch;
  /* enables momentum scrolling in iOS overflow elements */
  /*
      ul:first-child{
          margin-top: 10px;
      }
  */
}
.pushy ul {
  background: #141F48;
  height: 100%;
  margin: 0;
  margin-top: 103px;
  overflow: hidden;
}
.pushy ul li {
  margin: 0;
  white-space: nowrap;
}
.pushy ul a {
  background: #141F48;
  border-bottom: 1px #fff solid;
  display: block;
  color: #898fa2;
  padding: 15px 15px;
  text-decoration: none;
  text-transform: uppercase;
  outline: 0;
}
.pushy ul a:hover, .pushy ul a:active {
  color: #fff;
}
.pushy ul a .fa {
  font-size: 25px;
  margin-right: 15px;
  width: 25px;
}
.pushy.pushy-left {
  left: 0;
}
.pushy.pushy-right {
  right: 0;
}

/* Menu Movement */
.pushy-closed .pushy {
  -webkit-transition: width 0.3s ease-in;
  -moz-transition: width 0.3s ease-in;
  -o-transition: width 0.3s ease-in;
}

.pushy-open-left #container,
.pushy-open-left .push {
  -webkit-transform: translate3d(300px, 0, 0);
  -ms-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.pushy-open-left .pushy {
  -webkit-transition: width 0.3s ease-in;
  -moz-transition: width 0.3s ease-in;
  -o-transition: width 0.3s ease-in;
  width: 300px;
}

.pushy-right {
  -webkit-transform: translate3d(300px, 0, 0);
  -ms-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}

.pushy-open-right #container,
.pushy-open-right .push {
  -webkit-transform: translate3d(-300px, 0, 0);
  -ms-transform: translate3d(-300px, 0, 0);
  transform: translate3d(-300px, 0, 0);
}

/* Not in use because we are using Width Ease In
.pushy-open-left,
.pushy-open-right{
    .pushy{
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}
*/
/* Menu Transitions */
#container,
.pushy,
.push {
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

/* Site Overlay */
.site-overlay {
  display: none;
}

.pushy-open-left .site-overlay,
.pushy-open-right .site-overlay {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 500ms;
  animation: fade 500ms;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Submenu Appearance */
.pushy-submenu {
  /* Submenu Icon */
}
.pushy-submenu ul {
  padding-left: 0;
  -webkit-transition: max-height 0.2s ease-in-out;
  transition: max-height 0.2s ease-in-out;
}
.pushy-submenu ul .pushy-link {
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
.pushy-submenu ul .pushy-link a {
  background: #000;
  border: 0;
}
.pushy-submenu > a {
  position: relative;
}
.pushy-submenu > a::after {
  content: '';
  display: block;
  height: 11px;
  width: 8px;
  position: absolute;
  top: 50%;
  right: 15px;
  background: url("../Images/arrow.svg") no-repeat;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

/* Submenu Movement */
.pushy-submenu-closed ul {
  max-height: 0;
  overflow: hidden;
}
.pushy-submenu-closed .pushy-link {
  opacity: 0;
}

.pushy-submenu-open {
  /* Submenu Icon */
}
.pushy-submenu-open ul {
  max-height: 1000px;
}
.pushy-submenu-open .pushy-link {
  opacity: 1;
}
.pushy-submenu-open a::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}

.no-csstransforms3d .pushy-submenu-closed ul {
  max-height: none;
  display: none;
}

JavaScript

/* Controlled by /vendor/pushy/js/pushy.min.js */

Content Boxes

When to Use

Content boxes are containers for content. Below are several examples of usage.

Functionality

Helper CSS classes can be used with content boxes. Classes include .no-padding, .no-margin and .no-shadow. Classes can be combined.

Rendered Code

This is a content block.

Header

This is a content block with a header.

Header

Preferred Time: 04/28/16 9am - 5pm Action Button

This is a content block with a header and content on the right.

Header

Below is a content box with no padding.

If you include a class of .no-padding, you can apply this effect to your container. This can be helpful when you want content to be 100% width. An example is below.

Header Cell 1	Header Cell 2	Header Cell 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 2 Cell 1	Row 2 Cell 2	Row 1 Cell 3
Row 3 Cell 1	Row 3 Cell 2	Row 1 Cell 3
Row 4 Cell 1	Row 4 Cell 2	Row 1 Cell 3

HTML

	
		
			This is a content block.
		
	

	
		
			Header
		
		
			This is a content block with a header.
		
		

	
		
			Header
			
				Preferred Time: 04/28/16 9am - 5pm
				Action Button
			
		
		
			This is a content block with a header and content on the right.
		
			

	
		
			Header
		
		
			Below is a content box with no padding. 
			If you include a class of .no-padding, you can apply this effect to your container. This can be helpful when you want content to be 100% width. An example is below.
		
		
			
			  
			    
			      Header Cell 1
			      Header Cell 2
			      Header Cell 3
			    
			  
			  
			    
			      Row 1 Cell 1
			      Row 1 Cell 2
			      Row 1 Cell 3
			    
			    
			      Row 2 Cell 1
			      Row 2 Cell 2
			      Row 1 Cell 3
			    
			    
			      Row 3 Cell 1
			      Row 3 Cell 2
			      Row 1 Cell 3
			    
			    
			      Row 4 Cell 1
			      Row 4 Cell 2
			      Row 1 Cell 3

CSS

.content-box {
  background: #fff;
  box-shadow: 0px 2px 4px 0px #bbbbbb;
  box-sizing: border-box;
  color: #141F48;
  clear: both;
  margin-bottom: 20px;
  width: auto;
}
.content-box:last-child {
  margin-bottom: 0;
}
.content-box .content-box-header {
  background: #84BD41;
  box-sizing: border-box;
  color: #fff;
  display: table;
  font-size: 16px;
  padding: 10px 15px 9px;
  width: 100%;
}
.content-box .content-box-header::after {
  clear: both;
  content: "";
  display: table;
}
.content-box .content-box-header a,
.content-box .content-box-header .btn.transparent {
  color: #fff;
}
.content-box .content-box-header .title {
  color: #fff;
  display: table-cell;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3.4px;
  margin: 0;
  padding: 0;
  text-transform: none;
  vertical-align: middle;
  width: 250px;
}
.content-box .content-box-header .side-content {
  display: table-cell;
  margin: 0;
  vertical-align: middle;
}
.content-box .content-box-header button {
  margin: 0;
}
.content-box .content-box-body {
  padding: 15px;
}

/* LT IE9 Specific */
.lt-ie9 .content-box {
  border: 1px #ccc solid;
}

JavaScript

// No JavaScript Required

Layout Helpers

When to Use

The section below is intended as a guide for accomplishing special layouts without polluting the HTML with class names. The idea is to apply CSS properties directly to the element itself. Below are a few examples.

(Width values are borrowed from http://neat.bourbon.io/examples)

Functionality

Not applicable.

Rendered Code

1/2

1/3

1/4

1/2

1/4

HTML

CSS

#header-example-1,
#header-example-2,
#header-example-3,
#header-example-4 {
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
#header-example-1::after,
#header-example-2::after,
#header-example-3::after,
#header-example-4::after {
  clear: both;
  content: "";
  display: table;
}
#header-example-1 div,
#header-example-2 div,
#header-example-3 div,
#header-example-4 div {
  height: 100px;
}
#header-example-1 .last-child,
#header-example-2 .last-child,
#header-example-3 .last-child,
#header-example-4 .last-child {
  margin-right: 0;
}

#header-example-1 {
  background: #fb9bd3;
}
#header-example-1 div {
  background: #ff4cb5;
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
}
#header-example-1 div:last-child {
  margin-right: 0;
}

#header-example-2 {
  background: #b0fddf;
}
#header-example-2 div {
  background: #4cffb9;
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
}
#header-example-2 div:last-child {
  margin-right: 0;
}

#header-example-3 {
  background: #d1c4f8;
}
#header-example-3 div {
  background: #aa90ff;
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 23.23176%;
}
#header-example-3 div:last-child {
  margin-right: 0;
}

#header-example-4 {
  background: #86d4f9;
}
#header-example-4 .city {
  background: #51c6fc;
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
}
#header-example-4 .city:last-child {
  margin-right: 0;
}
#header-example-4 .name {
  background: #51c6fc;
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 23.23176%;
}
#header-example-4 .name:last-child {
  margin-right: 0;
}
#header-example-4 .name.last-child {
  margin-right: 0;
}

JavaScript

// No JavaScript Required