Spark-Extras

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 to the highlight board. For React and Angular components, you can use the additionalClasses property.

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).

Configurable Variables

Variable	Default	Description
$sprk-highlight-board-type-breakpoint	30rem	The breakpoint at which styles change for padding, font size and CTA width.
$sprk-highlight-board-content-width	30rem	Sets the maximum width of the content for the highlight board when it has an image.
$sprk-highlight-board-type-reduction-percentage	0.8	Sets the percentage to reduce the font size by for narrow viewports.
$sprk-highlight-board-height	31.25rem	Sets the height of the highlight board image.
$sprk-highlight-board-color	$sprk-white	Sets the background color of the highlight board.
$sprk-highlight-board-content-box-color	$sprk-white	Sets the background color of the content box.

Class Modifiers

Class	Description
.sprk-c-HighlightBoard--has-image	Sets up the styles for highlight boards with an image.
.sprk-c-HighlightBoard--stacked	Sets up the styles for the stacked highlight board variant.
.sprk-u-FullWidth	A Spark utility class that can be used on the highlight board to make it become 100% width.

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

Hello, Welcome To Spark Design System

Designers

Developers

<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="desktop"
  >

    <div class="sprk-c-HighlightBoard__content sprk-o-Stack sprk-o-Stack--large">
      <h1 class="sprk-b-TypeDisplayOne 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@s"
           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@s 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>

<SprkHighlightBoard
 imgSrc='https://staging.sparkdesignsystem.com/assets/toolkit/images/desktop.jpg'
 imgAlt='desktop'
 heading='Hello, Welcome To Spark Design System'
 ctaText='Designers'
 ctaHref='/gettingstarted/designers.html'
 ctaText2='Developers'
 ctaHref2='/gettingstarted/developers.html'
 idString='highlightboard-1'
/>

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' 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.

Information

See below for available customization options:

Property	Type	Description
imgSrc	string	The source for the image. If this property is provided, imgAlt is required.
imgAlt	string	The alt text for the image. If this property is provided, imgSrc is required.
heading	string	The heading text.
ctaText	string	The text for the first button.
ctaHref	string	The href for the first button.
ctaAnalytics	string	The data-analytics for the first button.
ctaIdString	string	The data-id for the first button.
ctaText2	string	The text for the second button.
ctaHref2	string	The href for the second button.
ctaAnalytics2	string	The data-analytics for the second button.
ctaIdString2	string	The data-id for the second button.
variant	string	Expects 'noImage' or 'stacked'. Alters the layout of the highlight board.
idString	string	The string to use for the data-id attribute for the component.
additionalClasses	string	Any additional classes to add to the highlight board.

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'.

React

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

Hello, Welcome To Spark Design System

Designers

Developers

<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-TypeDisplayTwo 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@s"
         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@s 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>

<SprkHighlightBoard
 variant='noImage'
 heading='Hello, Welcome To Spark Design System'
 ctaText='Designers'
 ctaHref='#'
 ctaText2='Developers'
 ctaHref2='#'
 idString='highlightboard-2'
/>

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'.

React

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

Hello, Welcome To Spark Design System

Designers

Developers

<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="desktop"
  >

    <div class="sprk-c-HighlightBoard__content sprk-o-Stack sprk-o-Stack--large">
      <h1 class="sprk-b-TypeDisplayOne 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@s"
           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@s 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>

<SprkHighlightBoard
 variant='stacked'
 imgSrc='https://staging.sparkdesignsystem.com/assets/toolkit/images/desktop.jpg'
 imgAlt='desktop'
 heading='Hello, Welcome To Spark Design System'
 ctaText='Designers'
 ctaHref='/gettingstarted/designers.html'
 ctaText2='Developers'
 ctaHref2='/gettingstarted/developers.html'
 idString='highlightboard-3'
/>

Getting Started

Fundamentals

Components

Utilities

Documentation

Highlight Board

Information

Restrictions

Configurable Variables

Class Modifiers

Default

Angular

Hello, Welcome To Spark Design System

Information

Information

No Image

Angular

React

Hello, Welcome To Spark Design System

Stacked

Angular

React

Hello, Welcome To Spark Design System