Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Highlight Board

Spark-Extras

The Highlight Board component is used as a lead into an experience as a means to encourage engagement within the experience.

Information

  • Headlines should grab attention and be concise.
  • Subheadlines provide additional context.

Restrictions

  • The background must either be a color or an image.
  • Headlines and Subheadlines should not exceed 2 lines.
  • You may have up to 2 call-to-action buttons.

Default

The default Highlight Board is used to encourage engagement with strong imagery.

Lift the burden of getting a home loan

Fast, Powerful and Completely Online

<div class="sprk-c-HighlightBoard sprk-c-HighlightBoard--has-image sprk-u-mbm">
  <img class="sprk-c-HighlightBoard__image" src="../../assets/toolkit/images/desktop.jpg" />
  <div class="sprk-c-HighlightBoard__content  sprk-c-HighlightBoard__content--light">
    <div class="sprk-u-mbl">
      <h1 class="sprk-b-TypeDisplayThree sprk-c-HighlightBoard__primary-heading sprk-u-mbs">Lift the burden of getting a home loan</h1>
      <h4 class="sprk-b-TypeDisplayFour sprk-c-HighlightBoard__sub-heading sprk-u-mbm">Fast, Powerful and Completely Online</h4>
    </div>
    <div class="sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s sprk-c-HighlightBoard__cta-container">
      <div class="sprk-o-Stack__item">
        <button class="sprk-c-HighlightBoard__cta sprk-c-Button sprk-c-Button--primary sprk-c-Button--full@sm">
          Learn More
        </button>
      </div>
    </div>
  </div>
</div>

No Image

This variation of the Highlight Board component should be used when there is an alternative to a photograph behind the lead message and call to action. Examples of this are a wash of color or a pattern set behind the content.

Lift the burden of getting a home loan

Fast, Powerful and Completely Online

<div class="sprk-c-HighlightBoard sprk-u-mbm">
  <div class="sprk-c-HighlightBoard__content ">
    <div class="sprk-u-mbl">
      <h1 class="sprk-b-TypeDisplayThree sprk-c-HighlightBoard__primary-heading sprk-u-mbs">Lift the burden of getting a home loan</h1>
      <h4 class="sprk-b-TypeDisplayFour sprk-c-HighlightBoard__sub-heading sprk-u-mbm">Fast, Powerful and Completely Online</h4>
    </div>
    <div class="sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s sprk-c-HighlightBoard__cta-container">
      <div class="sprk-o-Stack__item">
        <button class="sprk-c-HighlightBoard__cta sprk-c-Button sprk-c-Button--primary sprk-c-Button--full@sm">
          Learn More
        </button>
      </div>
    </div>
  </div>
</div>

Stacked

The stacked variation of the Highlight Board allows for the image, content and CTA to be separated to allow the subject matter of the image to become the primary focus.

Lift the burden of getting a home loan

Fast, Powerful and Completely Online

<div class="sprk-c-HighlightBoard sprk-c-HighlightBoard--stacked sprk-c-HighlightBoard--has-image sprk-u-mbm">
  <img class="sprk-c-HighlightBoard__image" src="../../assets/toolkit/images/desktop.jpg" />
  <div class="sprk-c-HighlightBoard__content ">
    <div class="sprk-u-mbl">
      <h1 class="sprk-b-TypeDisplayThree sprk-c-HighlightBoard__primary-heading sprk-u-mbs">Lift the burden of getting a home loan</h1>
      <h4 class="sprk-b-TypeDisplayFour sprk-c-HighlightBoard__sub-heading sprk-u-mbm">Fast, Powerful and Completely Online</h4>
    </div>
    <div class="sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s sprk-c-HighlightBoard__cta-container">
      <div class="sprk-o-Stack__item">
        <button class="sprk-c-HighlightBoard__cta sprk-c-Button sprk-c-Button--primary sprk-c-Button--full@sm">
          Learn More
        </button>
      </div>
    </div>
  </div>
</div>

Full Width

The full width variation allows the background image of the Highlight Board to span the entire width of the viewport.

Lift the burden of getting a home loan

Fast, Powerful and Completely Online

<div class="sprk-c-HighlightBoard sprk-c-HighlightBoard--has-image sprk-u-FullWidth sprk-u-mbm">
  <img class="sprk-c-HighlightBoard__image" src="../../assets/toolkit/images/desktop--flush.jpg" />
  <div class="sprk-c-HighlightBoard__content  sprk-c-HighlightBoard__content--light">
    <div class="sprk-u-mbl">
      <h1 class="sprk-b-TypeDisplayThree sprk-c-HighlightBoard__primary-heading sprk-u-mbs">Lift the burden of getting a home loan</h1>
      <h4 class="sprk-b-TypeDisplayFour sprk-c-HighlightBoard__sub-heading sprk-u-mbm">Fast, Powerful and Completely Online</h4>
    </div>
    <div class="sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s sprk-c-HighlightBoard__cta-container">
      <div class="sprk-o-Stack__item">
        <button class="sprk-c-HighlightBoard__cta sprk-c-Button sprk-c-Button--primary sprk-c-Button--full@sm">
          Learn More
        </button>
      </div>
    </div>
  </div>
</div>