Page header

Header with page name

Component example

HTML Markup

<div class="wmre-page-header   " style="background-image:url('https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000')">
  
  <div class="wmre-container wmre-page-header-container">
        <div class="wmre-page-header-box">
              
         <h1>Page header</h1>
    </div>
  </div>
  
</div>

Header with page name and icon

Component example

HTML Markup

<div class="wmre-page-header   " style="background-image:url('https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000')">
  
  <div class="wmre-container wmre-page-header-container">
        <div class="wmre-page-header-box">
              
        <svg class="wmre-page-header__icon">
  <use xlink:href="#wmre-general-info" href="#wmre-general-info"></use>
</svg>
      
         <h1>Page header</h1>
    </div>
  </div>
  
</div>

Plain Header

Component example

HTML Markup

<div class="wmre-page-header   " style="background-image:url('https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000')">
  
</div>

Plain Header - Large

Where a larger page header is needed you can use the following which will modify the height to 600px.

Component example

HTML Markup

<div class="wmre-page-header    wmre-page-header__large " style="background-image:url('https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000')">
  
</div>

Homepage Header

Component example

HTML Markup

<div class="wmre-page-header  wmre-page-header__home   " style="background-image:url('https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000')">
  
  <div class="wmre-container wmre-page-header-container">
        <div class="wmre-page-header-box">
              
         <h1>Building a healthier, happier, better connected and more prosperous West Midlands</h1>
    </div>
  </div>
  
</div>