Highlight Board

Code Examples

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

Information

  • The headline should grab attention and be concise.
  • To have the Highlight Board take up 100% width of the viewport regardless of it's container, add the class sprk-u-FullWidth.

Restrictions

  • The background must either be a color or an image.
  • The headline should not exceed 2 lines.
  • You may have up to 2 call-to-action buttons/links.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("highlightboard-1", "highlightboard-2", "highlightboard-3", etc).

Default

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

Angular

The Highlight Board component in spark-core-angular consists of two Angular components and one directive:

  • sprk-highlight-board
  • sprk-stack
  • sprkStackItem
placeholder

Hello, Welcome To Spark Design System

<div class="sprk-c-HighlightBoard sprk-c-HighlightBoard--has-image  sprk-u-mbm " data-id="highlightboard-1">
  <img class="sprk-c-HighlightBoard__image" src="../../assets/toolkit/images/desktop.jpg" alt="placeholder">

  <div class="sprk-c-HighlightBoard__content sprk-o-Stack sprk-o-Stack--large">
    <h1 class="sprk-b-TypeDisplayThree sprk-c-HighlightBoard__heading sprk-o-Stack__item">
      Hello, Welcome To Spark Design System
    </h1>

    <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-o-Stack--center-column ">
      <div class="sprk-o-Stack__item sprk-c-HighlightBoard__cta">
        <a class="sprk-c-Button sprk-c-Button--full@sm" href="/gettingstarted/designers.html">
          Designers
        </a>
      </div>

      <div class="sprk-o-Stack__item sprk-c-HighlightBoard__cta">
        <a class="sprk-c-Button sprk-c-Button--full@sm sprk-c-Button--secondary" href="/gettingstarted/developers.html">
          Developers
        </a>
      </div>
    </div>
  </div>
</div>
          
<sprk-highlight-board heading="Hello, Welcome To Spark Design System" ctaText="Designers" ctaHref="https://sparkdesignsystem.com/" ctaText2="Developers" ctaHref2="https://sparkdesignsystem.com/" imgSrc="https://staging.sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="placeholder" idString="highlightboard-1">
</sprk-highlight-board>

Information

See below for available customization options:

Input Type Description
type string This determines the variation of the Highlight Board that is rendered. Can be 'noImage', 'stacked', 'fullWidth', or not set at all. The default if not set is the default variation of the highlight board.
heading string The value supplied will be rendered as the heading.
subHeading string The value supplied will be rendered as the sub-heading.
analyticsStringCta string The value supplied will be assigned to the 'data-analytics' attribute on the call-to-action. Intended for an outside library to capture data.
analyticsStringCta2 string The value supplied will be assigned to the 'data-analytics' attribute on the second call-to-action. Intended for an outside library to capture data.
imgSrc string The Highlight Board will use this as the source for the main image.
imgAlt string The Highlight Board will use this as the alt text for the main image.
ctaText string The Highlight Board will use this as the text for the main call-to-action.
ctaHref string The Highlight Board will use this as the href for the main call-to-action.
ctaHref2 string The Highlight Board will use this as the href for the secondary call-to-action.
ctaText2 string The Highlight Board will use this as the text for the secondary call-to-action.
additionalClasses string Allows a string of classes to add, in addition to the spark classes. Intended for overrides.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

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.

Angular

To use this variant set the type equal to 'noImage'.

Hello, Welcome To Spark Design System

<div class="sprk-c-HighlightBoard sprk-u-mbm " data-id="highlightboard-2">
  <div class="sprk-c-HighlightBoard__content sprk-o-Stack sprk-o-Stack--large">
    <h1 class="sprk-b-TypeDisplayThree sprk-c-HighlightBoard__heading sprk-o-Stack__item">
      Hello, Welcome To Spark Design System
    </h1>

    <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-o-Stack--center-column sprk-o-Stack--center-row">
      <div class="sprk-o-Stack__item sprk-c-HighlightBoard__cta">
        <a class="sprk-c-Button sprk-c-Button--full@sm" href="/gettingstarted/designers.html">
          Designers
        </a>
      </div>

      <div class="sprk-o-Stack__item sprk-c-HighlightBoard__cta">
        <a class="sprk-c-Button sprk-c-Button--full@sm sprk-c-Button--secondary" href="/gettingstarted/developers.html">
          Developers
        </a>
      </div>
    </div>
  </div>
</div>
          
<sprk-highlight-board heading="Lift the burden of getting a home loan" subHeading="Fast, Powerful and Completely Online" ctaText="Learn More" type="noImage" idString="highlightboard-3">
</sprk-highlight-board>

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.

Angular

To use this variant set the type equal to 'stacked'.

placeholder

Hello, Welcome To Spark Design System

<div class="sprk-c-HighlightBoard sprk-c-HighlightBoard--has-image  sprk-c-HighlightBoard--stacked sprk-u-mbm " data-id="highlightboard-3">
  <img class="sprk-c-HighlightBoard__image" src="../../assets/toolkit/images/desktop.jpg" alt="placeholder">

  <div class="sprk-c-HighlightBoard__content sprk-o-Stack sprk-o-Stack--large">
    <h1 class="sprk-b-TypeDisplayThree sprk-c-HighlightBoard__heading sprk-o-Stack__item">
      Hello, Welcome To Spark Design System
    </h1>

    <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-o-Stack--center-column sprk-o-Stack--center-row">
      <div class="sprk-o-Stack__item sprk-c-HighlightBoard__cta">
        <a class="sprk-c-Button sprk-c-Button--full@sm" href="/gettingstarted/designers.html">
          Designers
        </a>
      </div>

      <div class="sprk-o-Stack__item sprk-c-HighlightBoard__cta">
        <a class="sprk-c-Button sprk-c-Button--full@sm sprk-c-Button--secondary" href="/gettingstarted/developers.html">
          Developers
        </a>
      </div>
    </div>
  </div>
</div>
          
<sprk-highlight-board heading="Lift the burden of getting a home loan" subHeading="Fast, Powerful and Completely Online" ctaText="Learn More" type="stacked" imgSrc="https://staging.sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="placeholder" idString="highlightboard-4">
</sprk-highlight-board>