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-1", etc).

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.

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>

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

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.

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>

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.

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>

Promo With Reversed Image

Promo with clickable image in reverse order.

Angular

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>