Awards

Code Examples

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.

Restrictions

  • 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 ("award-1", "award-2", "award-3", etc).

Award

Award Component Heading

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"
 data-id="award-1"
>
  <h2 class="sprk-o-Stack__item sprk-o-Stack__item--center-column sprk-b-TypeDisplayFive sprk-b-Measure sprk-b-Measure--narrow sprk-u-TextAlign--center">
    Award Component Heading
  </h2>

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

      <a
       class="sprk-o-Stack__item sprk-o-Stack__item--flex@s sprk-o-Stack"
       href=""
      >
        <img
         class="sprk-o-Stack__item sprk-o-Stack__item--center-column"
         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--simple sprk-b-Link--has-icon"
     data-sprk-toggle="trigger"
     href="#"
    >
      <svg
       class="sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--toggle sprk-u-mrs"
       data-sprk-toggle="icon"
       viewBox="0 0 64 64"
      >
        <use xlink:href="#chevron-down-circle-two-color"></use>
        </svg>
        My Disclaimer
        </a>

        <div data-sprk-toggle="content">
          <p class="sprk-b-TypeBodyFour sprk-u-pts sprk-u-pbs">
            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>
        </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"
 idString="award-1"
>
  </sprk-award>
<SprkAward
 heading="Award Component Heading"
 idString="award-1"
 disclaimerText="
    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.
  "
 disclaimerTitle="My Disclaimer"
 images={[
 {
 href:
 '#nogo',
 src:
 'https://www.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg',
 alt:
 'Spark Placeholder Logo',
 analyticsString:
 'award-1',
 element:
 'a',
 },
 {
 href:
 '#nogo',
 src:
 'https://www.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg',
 alt:
 'Spark Placeholder Logo',
 analyticsString:
 'award-2',
 element:
 'a',
 },
 ]}
/>

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

Prop Type Description
additionalClasses String Expects a space-separated list of classes to append to the class attribute of the SprkAward component.
disclaimerText String The text that will be inside the disclaimer toggle.
disclaimerTitle String The text that will be the clickable title of the disclaimer toggle.
disclaimerAnalytics String The value supplied will be assigned to the 'data-analytics' attribute on the disclaimer toggle. This is intended to be used as a selector for automated tools. This value should be unique per page.
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 'extraTiny', 'tiny', 'small', 'medium', 'large', 'huge'. You will need to experiment with your content to see which value is the best fit.
images Array This array should contain two objects with the image data. The image objects should have keys of 'src' and 'alt'. Optional keys of 'analyticsString', 'addClasses', 'href', 'element' and 'linkAddClasses' can also be added. The 'addClasses' key should be a space-separated string of additional classes to be added to the image. The 'linkAddClasses' key should be a space-separated string of additional classes to be added to the link element that wraps the image. The 'element' key should be set to 'a' for an anchor element or a React Router Link. If 'element' is set to 'a' then an 'href' should be supplied.
heading String The text that appears above the images and serves as the heading for the award section.
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.