2.16 #Components.header Header

Toggle example guides Toggle HTML markup

Header including title, optional back button, info text and action button.

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

Header title

Markup
<header class="sb-header sb-border-light-1">
  <div class="sb-header__start">
   <button class="sb-btn--subtle sb-btn--s" aria-label="Back">
     <svg class="sb-icon" viewBox="-4 -1.909 16 16">
       <path d="M6.7071 10.3838c.3905.3905.3905 1.0237 0 1.4142-.3905.3905-1.0237.3905-1.4142 0l-5-5c-.3905-.3905-.3905-1.0237 0-1.4142l5-5c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3905.3905 1.0237 0 1.4142L2.4142 6.091l4.293 4.2928z"/>
     </svg>
   </button>
  </div>
  <div class="sb-header__center">
   <h1 class="sb-header__title sb-title">Header title</h1>
  </div>
  <div class="sb-header__end">
   <button href="#" class="sb-btn sb-btn--primary">Action button</button>
  </div
</header>
Source: components/_header.scss, line 1