Hub header

Primary hub header

Component example

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML Markup

<div class="wmre-hub-header">
      <div class="wmre-hub-header-left-pane"></div>
      <img class="banner" src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000" alt="page title"/>
      <div class="wmre-hub-header-text-pane">
          <h1 class="hub">Lorem ipsum dolor</h1>
          <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          
      
      </div>        
  </div>

Primary hub header with Icon

Component example

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML Markup

<div class="wmre-hub-header">
      <div class="wmre-hub-header-left-pane"></div>
      <img class="banner" src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000" alt="page title"/>
      <div class="wmre-hub-header-text-pane">
          <h1 class="hub">Lorem ipsum dolor</h1>
          <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          
          <i class="fal fa-home-alt fa-3x" aria-hidden="true"></i>
      
      
      </div>        
  </div>

Primary hub header with Image

Component example

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML Markup

<div class="wmre-hub-header">
      <div class="wmre-hub-header-left-pane"></div>
      <img class="banner" src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000" alt="page title"/>
      <div class="wmre-hub-header-text-pane">
          <h1 class="hub">Lorem ipsum dolor</h1>
          <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          
      
          <img class="icon" alt="banner image" src="/img/examples/logos-mayor-of-the-west-midlands.png">
      
      </div>        
  </div>

Primary hub header without subtitle

Component example

Lorem ipsum dolor

HTML Markup

<div class="wmre-hub-header">
      <div class="wmre-hub-header-left-pane"></div>
      <img class="banner" src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000" alt="page title"/>
      <div class="wmre-hub-header-text-pane">
          <h1 class="hub">Lorem ipsum dolor</h1>
          
          
      
      </div>        
  </div>