Promo

Code Examples

Promos are blocks of content that may include text, form elements, icons, or images. Promos are useful for drawing attention to a promotion or feature.

Information

  • Use the sprk-c-Promo--bordered class to include a border on the Promo.

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

Configurable Variables

Variable Default Description
$sprk-promo-background-color $sprk-white The background color of the promo.
$sprk-promo-border 1px solid $sprk-gray The border style of the border promo variant.
$sprk-promo-max-width 42.5rem The maximum width of the promo.
$sprk-promo-breakpoint 42.5rem The breakpoint for large viewport styles.
$sprk-promo-image-narrow-max-height 20rem The maximum height of the image on narrow viewports.
$sprk-promo-image-narrow-max-width 50% The maximum width of the image on narrow viewports.
$sprk-promo-title-font-color $sprk-black The color of the title.
$sprk-promo-title-font-weight $sprk-font-weight-display-four The font weight of the title.
$sprk-promo-subtitle-font-color $sprk-black The color of the subtitle.
$sprk-promo-subtitle-font-weight $sprk-font-weight-body-one The font weight of the subtitle.

Class Modifiers

Class Description
.sprk-c-Promo--flag Sets styles for the flag promo variant.
.sprk-c-Promo__image--flag Sets styles for the image in the flag promo variant.
.sprk-c-Promo--bordered Sets a border around the promo.

Base

Base promo containing text and a button.

Angular

The default Promo component includes only body text by default, but it can also optionally include a title, subtitle, and button/link. See below for additional variants that include images in various layouts.

React

The default Promo component includes only body text by default, but it can also optionally include a title, subtitle, and button or link. See below for additional variants that include images in various layouts.

Title

Subtitle
Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
<div
 class="sprk-c-Promo  sprk-c-Promo--bordered sprk-o-Stack sprk-o-Stack--split@s"
 data-id="promo-1"
>

  <div class="sprk-c-Promo__content sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--large">

    <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item sprk-c-Promo__title">
      Title
    </h3>

    <div class="sprk-c-Promo__subtitle sprk-o-Stack__item">
      Subtitle
    </div>

    <div class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
      Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
    </div>

    <div class="sprk-o-Stack__item">
      <a
       href="#"
       class="sprk-c-Button"
      >
        Learn More
        </a>
    </div>
  </div>

  </div>
          
<sprk-promo
 title="Title"
 subtitle="Subtitle"
 cta="button"
 ctaText="Learn More"
 buttonHref="#"
 hasBorder="true"
 idString="promo-1"
>
  Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
  </sprk-promo>
<SprkPromo
 title="Title"
 subtitle="Subtitle"
 additionalClasses="sprk-o-Stack--split@s"
 cta="button"
 ctaText="Learn More"
 ctaHref="https://www.sparkdesignsystem.com"
 ctaAnalytics="promo-cta-1-analytics"
 ctaIdString="promo-cta-1"
 hasBorder
 idString="promo-1"
>

  Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.

  </SprkPromo>

Information

See below for available customization options:

Property Type Description
title string The main heading on the Promo.
subtitle string The subtitle on the Promo.
cta string Can be 'link' or 'button'. This determines the type for the call-to-action in the Promo body.
ctaText string This determines the text for the call-to-action.
buttonHref string This will be the href for the button if cta is set to 'button'.
buttonLinkAnalytics string The value supplied will be assigned to the 'data-analytics' attribute on the call-to-action button if cta is set to 'button'. This is intended for an outside library to capture data.
ctaLinkHref string This will be the href for the the link if cta is set to 'link'.
ctaLinkAnalytics string The value supplied will be assigned to the 'data-analytics' attribute on the call-to-action link if cta is set to 'link'. This is intended for an outside library to capture data.
additionalClasses string This is a string of additional classes to add to the main Promo container. This is intended for overrides.
additionalClassesContent string This is a string of additional classes to add to the content section of the Promo. This is intended for overrides.
isFlag boolean Determines if the Promo should render in the Flag layout. imgSrc and imgAlt should also be set if isFlag is true.
additionalClassesFlagLink string If isFlag is set to true, the Promo will render with an anchor element containing the image specified in imgSrc. This is a string of additional classes to add to that anchor element. This is intended for overrides.
flagLinkAnalytics string If isFlag is set to true, the Promo will render with an anchor element containing the image specified in imgSrc. The value supplied here will be assigned to the 'data-analytics' attribute on that anchor element. This is intended for an outside library to capture data.
imgSrc string This will be the source for the Promo image.
imgAlt string This will be the alt text for the Promo image.
imgHref string This will be the href for the Promo image.
imgLinkAnalytics string If imgSrc is true and isFlag is false, the value supplied will be assigned to the 'data-analytics' attribute on the anchor containing the Promo image. This is intended for an outside library to capture data.
additionalClassesImgLink string If imgSrc is true and isFlag is false, this string of additional classes will be added to the anchor containing the Promo image. This is intended for overrides.
mediaRev boolean If true, the media will render on the right side of the Promo content.
hasBorder boolean If true, the Promo will be rendered with a border. The styles for the border are determined by $sprk-promo-border and can be overridden in _settings.scss.
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
title string The text to appear in the title section.
subtitle string The text to appear in the subtitle section.
additionalClasses string (space-delimited values) Any additional classes to apply to the root element of the Promo.
additionalClassesContent string (space-delimited values) Any additional classes to apply to the content element of the Promo.
cta string The type of element to use for the Call-to-Action. If this property is omitted, no Call-to-Action will be rendered. Acceptable values are "button" or "link".
ctaText string The text to include in the Call-to-Action.
ctaHref string The URL to navigate to when the Call-to-Action is clicked.
ctaAnalytics string The string to use for the data-analytics attribute on the Call-to-Action.
ctaIdString string The string to use for the data-id attribute on the Call-to-Action.
imgSrc string The source location of the Promo image. If this property is omitted, no image will be rendered.
imgAlt string The alt text property for the image.
imgLinkHref string The URL to navigate to when the image is clicked.
imgLinkAnalytics string The string to use for the data-analytics attribute on the image link.
imgLinkIdString string The string to use for the data-id attribute on the image link.
additionalClassesImgLink string Any additional classes (space-delimited string) to apply to the image link.
idString string The string to use for the data-id property on the root Promo element.
isFlag boolean If provided, the Promo will render as the Flag variant.
mediaRev boolean If provided, the Promo will be rendered in reverse horizontal order (content on the left, image on the right).
hasBorder boolean If true, the Promo will be rendered with a border. The styles for the border are determined by $sprk-promo-border.

Flag Promo

A promo with a small image on the left or right side. Useful for adding an image to a promo where the text is still the main focus.

Restrictions

  • Images must have a descriptive alt tag.

Angular

The layout of the flag can be reversed (image on the right) using the mediaRev property.

React

The layout of the flag can be reversed (image on the right) using the mediaRev property.

Spark placeholder image.
Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
<div
 class="sprk-c-Promo sprk-c-Promo--flag  sprk-c-Promo--bordered sprk-o-Stack sprk-o-Stack--split@s"
 data-id="promo-2"
>

  <a
   href="#"
   class="sprk-o-Stack__item sprk-o-Stack__item--fourth@s"
  >
    <img
     class="sprk-c-Promo__image--flag"
     alt="Spark placeholder image."
     src="../../assets/toolkit/images/spark-placeholder.jpg"
    >
      </a>

      <div class="sprk-c-Promo__content sprk-o-Stack__item sprk-o-Stack__item--three-fourths@s sprk-o-Stack sprk-o-Stack--large">

        <div class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
          Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
        </div>

      </div>

      </div>
          
<sprk-promo
 isFlag=true
 imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg"
 imgAlt="Spark Design System Logo"
 idString="promo-2"
>
  Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
  </sprk-promo>
<SprkPromo
 additionalClasses="sprk-o-Stack--split@s"
 imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg"
 imgAlt="Spark Design System Logo"
 imgLinkHref="https://sparkdesignsystem.com"
 imgLinkAnalytics="promo-3-img-link-analytics"
 imgLinkIdString="promo-3-img-link"
 idString="promo-3"
 isFlag
 hasBorder
>

  Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.

  </SprkPromo>

Promo With Image

Promo with clickable image. Useful for adding an image to a promo where the image is of equal importance to the text.

Restrictions

  • Image must have a descriptive alt tag.

Angular

This variant is rendered when imgSrc has a value and isFlag is false. You will also need to provide a value for imgAlt.

React

This variant is rendered when imgSrc has a value and isFlag is false. You will also need to provide a value for imgAlt.

Spark placeholder image.

Title

Subtitle
Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
<div
 class="sprk-c-Promo  sprk-c-Promo--bordered sprk-o-Stack sprk-o-Stack--split@s"
 data-id="promo-3"
>

  <a
   href="#"
   class="sprk-o-Stack__item sprk-o-Stack__item--half@s "
  >
    <img
     class="sprk-c-Promo__image "
     src="../../assets/toolkit/images/blue-house.jpg"
     alt="Spark placeholder image."
    />
    </a>

    <div class="sprk-c-Promo__content sprk-o-Stack__item sprk-o-Stack__item--half@s sprk-o-Stack sprk-o-Stack--large">

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item sprk-c-Promo__title">
      Title
    </h3>

      <div class="sprk-c-Promo__subtitle sprk-o-Stack__item">
        Subtitle
      </div>

      <div class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
      </div>

      <div class="sprk-o-Stack__item">
        <a
         href="#"
         class="sprk-c-Button"
        >
          Learn More
          </a>
      </div>
    </div>

    </div>
          
<sprk-promo
 title="Title"
 subtitle="Subtitle"
 imgAlt="placeholder"
 imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/flower.jpg"
 cta="button"
 ctaText="Learn More"
 idString="promo-3"
>
  Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
  </sprk-promo>
<SprkPromo
 title="Title"
 subtitle="Subtitle"
 additionalClasses="sprk-o-Stack--split@s"
 cta="button"
 ctaText="Learn More"
 ctaHref="https://www.sparkdesignsystem.com"
 ctaAnalytics="promo-cta-5-analytics"
 ctaIdString="promo-cta-5"
 imgAlt="placeholder"
 imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/flower.jpg"
 imgLinkAnalytics="promo-5-img-link-analytics"
 imgLinkIdString="promo-5-img-link"
 idString="promo-5"
 hasBorder
>

  Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.

  </SprkPromo>

Promo With Reversed Image

Promo with clickable image in reverse order.

Angular

To reverse the image layout, set mediaRev to true.

React

To reverse the image layout, set mediaRev to true.

Title

Subtitle
Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
Spark placeholder image.
<div
 class="sprk-c-Promo  sprk-c-Promo--bordered sprk-o-Stack sprk-o-Stack--split@s"
 data-id="promo-4"
>

  <div class="sprk-c-Promo__content sprk-o-Stack__item sprk-o-Stack__item--half@s sprk-o-Stack sprk-o-Stack--large">

    <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item sprk-c-Promo__title">
      Title
    </h3>

    <div class="sprk-c-Promo__subtitle sprk-o-Stack__item">
      Subtitle
    </div>

    <div class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
      Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
    </div>

    <div class="sprk-o-Stack__item">
      <a
       href="#"
       class="sprk-c-Button"
      >
        Learn More
        </a>
    </div>
  </div>

  <a
   href="#"
   class="sprk-o-Stack__item sprk-o-Stack__item--half@s"
  >
    <img
     class="sprk-c-Promo__image "
     src="../../assets/toolkit/images/blue-house.jpg"
     alt="Spark placeholder image."
    />
    </a>
    </div>
          
<sprk-promo
 title="Title"
 subtitle="Subtitle"
 mediaRev=true
 imgAlt="placeholder"
 imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/flower.jpg"
 imgHref="https://sparkdesignsystem.com"
 cta="button"
 ctaText="Learn More"
 idString="promo-4"
>
  Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
  </sprk-promo>
<SprkPromo
 title="Title"
 subtitle="Subtitle"
 additionalClasses="sprk-o-Stack--split@s"
 cta="button"
 ctaText="Learn More"
 ctaHref="https://www.sparkdesignsystem.com"
 ctaAnalytics="promo-cta-6-analytics"
 ctaIdString="promo-cta-6"
 imgAlt="placeholder"
 imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/flower.jpg"
 imgLinkHref="https://sparkdesignsystem.com"
 imgLinkAnalytics="promo-6-img-link-analytics"
 imgLinkIdString="promo-6-img-link"
 idString="promo-6"
 mediaRev
 hasBorder
>

  Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.

  </SprkPromo>