Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Awards

Code Examples

Spark-Extras

The Award component showcases awards in a vertically stacked layout that switches to side by side on larger screens.

Information

  • The Award images are clickable.
  • Heading content of the Award can wrap.
  • Heading content of the Award is centered.
  • Awards are stacked by default and expand to side by side layout on larger viewports.

Award

Super Awesome Award Example Component That Is So Fun

Spark placeholder image Spark placeholder image
My Disclaimer

This is an example of disclaimer content. The aria-expanded="true" attribute will be viewable in the DOM on the toggle link when this content is shown. When this content is hidden the aria-expanded attribute will have the value of false. This helps accessibilty devices in understanding that the link is a control for expandable content. 

<div class="sprk-o-CenteredColumn sprk-o-Stack sprk-o-Stack--medium">
  <h2 class="sprk-o-Stack__item sprk-o-Stack__item--center sprk-b-TypeDisplayFive sprk-b-Measure sprk-b-Measure--narrow sprk-u-TextAlign--center">
    Super Awesome Award Example Component That Is So Fun
  </h2>

  <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s">
    <a class="sprk-o-Stack__item sprk-o-Stack__item--equal@s sprk-o-Stack" href="">
      <img
        class="sprk-o-Stack__item sprk-o-Stack__item--center"
        alt="Spark placeholder image"
        src="../../assets/toolkit/images/spark-placeholder.jpg" />
    </a>

    <a class="sprk-o-Stack__item sprk-o-Stack__item--equal@s sprk-o-Stack" href="">
      <img
        class="sprk-o-Stack__item sprk-o-Stack__item--center"
        alt="Spark placeholder image"
        src="../../assets/toolkit/images/spark-placeholder.jpg" />
    </a>
  </div>

  <div class="sprk-o-Stack__item" data-sprk-toggle="container">
    <a class="sprk-b-TypeBodyThree sprk-b-Link sprk-b-Link--standalone" data-sprk-toggle="trigger" href="#">
        <svg class="sprk-c-Icon sprk-u-mrs" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
        My Disclaimer
    </a>

    <p class="sprk-b-TypeBodyFour sprk-u-pts sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of disclaimer content. The aria-expanded="true" attribute will be viewable in the DOM on the toggle link when this content is shown. When this content is hidden the aria-expanded attribute will have the value of false. This helps accessibilty devices in understanding that the link is a control for expandable content.
    </p>
  </div>
</div>
          
<sprk-award splitAt="tiny" title="Spark Award Component" imgOneSrc="https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg" imgTwoSrc="https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg" imgOneAlt="placeholder!" imgOneHref="https://www.sparkdesignsystem.com/" imgTwoHref="https://www.sparkdesignsystem.com/" imgTwoAlt="placeholder!" disclaimerCopy="This is some copy for the disclaimer about disclaimer things." disclaimerTitle="My disclaimer title" analyticsStringImgOne="Foo" analyticsStringImgTwo="Test">
</sprk-award>

Information

See below for available customization options:

Input Type Description
additionalClasses string Expects a space-separated list of classes to append to the class attribute of the sprk-award component.
analyticsStringImgOne string The string that will be assigned to the data-analytics attribute of the first image.
analyticsStringImgTwo string The string that will be assigned to the data-analytics attribute of the second image.
disclaimerCopy string The text that will be inside the disclaimer toggle at the bottom of the footer.
disclaimerTitle string The text that will be the clickable title of the disclaimer toggle.
imgOneAlt string The alt text that will be applied to the first image.
imgOneHref string The value assigned to href in the link surrounding the first image.
imgOneSrc string The value assigned to the src attribute of the first image.
imgTwoAlt string The alt text that will be applied to the second image.
imgTwoHref string The value assigned to href in the link surrounding the second image.
imgTwoSrc string The value assigned to the src attribute of the second image.
splitAt string The relative size of viewport that the award component should switch from a stacked layout to a spread out layout. Values can be 'tiny', 'small', 'medium', 'large', 'huge'. You will need to experiment with your content to see which value is the best fit.
title string The text that appears above the images and serves as the heading for the award section.
sparkdesignsystem@quickenloans.com