The Highlight Board component is used as a lead into an experience as a means to encourage engagement within the experience.
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 | 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. |
The default Highlight Board is used to encourage engagement with strong imagery.
The Highlight Board component in spark-core-angular consists of two Angular components and one directive:
<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'
/>
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. |
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.
To use this variant set the type equal to 'noImage'.
To use this variant set the variant equal to 'noImage'.
<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'
/>
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.
To use this variant set the type equal to 'stacked'.
To use this variant set the variant equal to 'stacked'.
<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'
/>