Mastheads

A Masthead is a full-width component used at the top of first-level pages.

Home Page Masthead

This Masthead should only be used on the Home Page or landing pages where you need to have a smaller pre-headline leading into the main headline.

It only contains the h6 pre-headline, the h1 main headline, and a background image which is set using an inline style="background-image:url(...)" declaration. It does not include a paragraph or call-to-action.

Welcome to Nine Labs

We help travel brands create better digital product design teams.

<div class="masthead-image" style="background-image:url(/assets/img/travel-user-experience-design.jpg)">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="masthead-content">
          <h6 class="pre-text">Welcome to Nine Labs</h6>
          <h1>We help travel brands create better digital product design teams.</h1>
        </div>
      </div>
    </div>
  </div>
</div>

Image Masthead

The Image Masthead includes a background image which is set using an inline style="background-image:url(...)" declaration. It includes a H1 level Heading, a paragraph of text, and an optional Call-to-Action button.

Delivering Business Outcomes that Matter

Are your teams delivering web and mobile experiences that delight your customers and maximize business value? Get the best thinking from startups and enterprises to give your projects the support they need to succeed.

Find Out How 
<div class="masthead-image" style="background-image:url(/assets/img/travel-user-experience-design.jpg)">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="masthead-content">
          <div class="highlight-bar"></div>
          <h1>Delivering Business Outcomes that Matter</h1>
          <p>Are your teams delivering web and mobile experiences that delight your customers and maximize business value? Get the best thinking from startups and enterprises to give your projects the support they need to succeed.</p>
          <a href="...">Find Out How</a>
        </div>
      </div>
    </div>
  </div>
</div>

Default Masthead

The default Masthead includes a H1 level Heading, a paragraph of text, and an optional Call-to-Action button.

Delivering Business Outcomes that Matter

Are your teams delivering web and mobile experiences that delight your customers and maximize business value? Get the best thinking from startups and enterprises to give your projects the support they need to succeed.

Find Out How 
<div class="masthead">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="masthead-content">
          <div class="highlight-bar"></div>
          <h1>Delivering Business Outcomes that Matter</h1>
          <p>Are your teams delivering web and mobile experiences that delight your customers and maximize business value? Get the best thinking from startups and enterprises to give your projects the support they need to succeed.</p>
          <a href="...">Find Out How</a>
        </div>
      </div>
    </div>
  </div>
</div>

Simple Masthead

The default Masthead includes a H1 level Heading and a paragraph of text, but does not have any call-to-action.

Delivering Business Outcomes that Matter

Are your teams delivering web and mobile experiences that delight your customers and maximize business value? Get the best thinking from startups and enterprises to give your projects the support they need to succeed.

<div class="masthead">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="masthead-content">
          <div class="highlight-bar"></div>
          <h1>Delivering Business Outcomes that Matter</h1>
          <p>Are your teams delivering web and mobile experiences that delight your customers and maximize business value? Get the best thinking from startups and enterprises to give your projects the support they need to succeed.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Article Masthead

For blog articles and white-papers. You’ll see it is very similar to the simple masthead, but replaces the paragraph of text with information about the article or white-paper.

What Makes a Healthy Design Team?

September 30, 2019 // 7 min read

<div class="masthead-article">
  <div class="row">
    <div class="col">
      <div class="highlight-bar"></div>
      <h1>What Makes a Healthy Design Team?</h1>
      <p class="pub-info">September 30, 2019 // 7 min read</p>
    </div>
  </div>
</div>
On this page: