Promo

Promos are groups of related promotional content that are meant to be displayed at full width. Use the Promo component when you would like to promote something new or existing. If necessary, you may add background colors, padding and/or a border.

Information

  • Promos use the Stack Layout Object and the items are stacked by default and will split side by side at larger viewports.
  • You may change the breakpoint at which the items split by adjusting the Stack split responsive suffix class.
  • Spark has built in spacing classes for padding that you can add to the container.

Base

Base Promos include a heading and a description.

Title

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-o-Stack sprk-o-Stack--split@s sprk-o-Stack--medium">

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@s sprk-o-Stack sprk-o-Stack--medium">
    <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Title
    </h3>

    <p 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.
    </p>

  </div>
</div>

Promo Image With Icon

Promos can be used with an optional clickable illustration or icon.

Title

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-o-Stack sprk-o-Stack--split@s sprk-o-Stack--medium">

  <a href="#" class="sprk-o-Stack__item">
    <svg height="150" width="167" viewBox="0 0 220.63 197.62">
      <use xlink:href="#sparkler" />
    </svg>
  </a>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@s sprk-o-Stack sprk-o-Stack--medium">
    <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Title
    </h3>

    <p 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.
    </p>

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

  </div>
</div>

Promo With Image

Promos can be used with an optional clickable image.

A white and yellow flower.

Title

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-o-Stack sprk-o-Stack--split@s sprk-o-Stack--medium">
  <a href="#" class="sprk-o-Stack__item">
    <img alt="A white and yellow flower." src="../../assets/toolkit/images/flower.jpg">
  </a>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@s sprk-o-Stack sprk-o-Stack--medium">
    <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Title
    </h3>

    <p 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.
    </p>

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

  </div>
</div>

Promo With Reversed Image

The default position for media in Promos is on the left side. You may choose to have the media be on the right instead.

Title

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.

A white and yellow flower.
<div class="sprk-o-Stack sprk-o-Stack--split@s sprk-o-Stack--medium">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@s sprk-o-Stack sprk-o-Stack--medium">
    <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Title
    </h3>

    <p 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.
    </p>

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

  <a href="#" class="sprk-o-Stack__item">
    <img alt="A white and yellow flower." src="../../assets/toolkit/images/flower.jpg">
  </a>
</div>