34 #page-header Page header

Page header default component.

Examples

.page-header--image

Header with a background image

.page-header--large-intro

Header with larger intro text

<div class="page-header [modifier class]">
  <div class="container-fluid page-header__hero-title">
    <p>Quisque iaculis leo lorem, <strong>scelerisque scelerisque</strong> nisi maximus non. Cras vitae malesuada sem.</p>
  </div>
</div>

34.1 #page-header.1 Informational site

Example

Business, Economy, Euro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis, sapien at malesuada blandit, tortor nisl facilisis velit, sit amet mattis tortor nisi vitae quam.

<div class="page-header">
  <nav class="page-navigation" role="navigation">
    <div class="container-fluid">
      <nav class="breadcrumb breadcrumb-processed breadcrumb--collapsible" role="navigation" aria-label="breadcrumbs">
        <ol class="breadcrumb__segments-wrapper">
          <li class="breadcrumb__segment breadcrumb__segment--first">
            <a href="#" class="breadcrumb__link" rel="home">
              <span class="breadcrumb__text">Home</span>
            </a>
          </li>
          <li class="breadcrumb__segment breadcrumb__segment--last">
            <a href="#" class="breadcrumb__link">
              <span class="breadcrumb__text">Announcements</span>
            </a>
          </li>
        </ol>
      </nav>
    </div>
  </nav>
  <div class="container-fluid page-header__hero-title">
    <div class="row">
      <div class="col-lg-9">
        <div class="meta meta--header">
          <span class="meta__item meta__item--type">News article</span>
          <span class="meta__item">
            <span class="date-display-single" property="dc:date" datatype="xsd:dateTime" content="2015-07-06T17:44:28+02:00">6 July 2015</span>
          </span>
          <span class="meta__item">Brussels</span>
        </div>
        <h1>Business, Economy, Euro</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Ut iaculis, sapien at malesuada blandit, tortor nisl facilisis velit, sit amet mattis tortor nisi vitae quam.
        </p>
      </div>
    </div>
  </div>
</div>

34.2 #page-header.2 Homepage

Example

<div class="page-header page-header--homepage page-header--image">
  <div class="container-fluid page-header__hero-title">
    <div class="row padding-reset">
      <div class="col-lg-9">
        <h1>Building Europe together</h1>
      </div>
    </div>
  </div>
</div>

34.3 #page-header.3 Intro text xlarge

Example

<div class="page-header page-header--xlarge-intro">
  <div class="container-fluid page-header__hero-title">
    <div class="field__label field__label--above">Highlight</div>
    <p>Maecenas at mi <strong>molestie nulla</strong> tempor interdum sed sit amet ipsum.</p>
  </div>
</div>