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.
Angular
The Promo component in spark-core-angular consists of two Angular components:
- sprk-promo
- sprk-icon
The default Promo component will render with a heading and body text. See below on how to add in an image 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">
<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>
<sprk-promo title="Title">
Lorem ipsum dolor. Sit amet pede. empus 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:
| Input | Type | Description |
|---|---|---|
| media | string | Can be 'img' or 'icon'. This will render out the Promo with an image or an icon as the main media. |
| title | string | The main heading on the Promo. |
| ctaLinkAnalytics | string | The value supplied will be assigned to the 'data-analytics' attribute on the call-to-action link if the cta is set to 'link'. Intended for an outside library to capture data. |
| buttonLinkAnalytics | string | The value supplied will be assigned to the 'data-analytics' attribute on the call-to-action button if the cta is set to 'button'. Intended for an outside library to capture data. |
| imgLinkAnalytics | string | The value supplied will be assigned to the 'data-analytics' attribute on the image if the media type is set to 'image'. Intended for an outside library to capture data. |
| iconLinkAnalytics | string | The value supplied will be assigned to the 'data-analytics' attribute on the icon if the media type is set to 'icon'. Intended for an outside library to capture data. |
| cta | string | Can be 'link' or 'button'. This will render out a button or a link as the call-to-action. |
| ctaText | string | This will render out as the text for the call-to-action. |
| imgHref | string | This will be the href for the image if media is set to 'img'. |
| iconHref | string | This will be the href for the icon if media is set to 'icon'. |
| iconType | string | This should be the name of the desired icon and will render the icon if media is set to 'icon'. |
| buttonHref | string | This will be the href for the button if cta is set to 'button'. |
| imgAlt | string | This will be the alt text for the main image if media is set to 'img'. |
| imgSrc | string | This will be the source for the main image if media is set to 'img'. |
| mediaRev | string | If this is set to yes, the media will render on the right side of the text. If not set or set to no, the media will render on the left side. |
| ctaLinkHref | string | This will be the href for the the cta if cta is set to 'link'. |
| additionalClasses | string | Allows a string of classes to add to the Promo, in addition to the Spark classes. Intended for overrides. |
| additionalClassesImgLink | string | Allows a string of classes to add to the image link, in addition to the Spark classes. Intended for overrides. |
| additionalClassesIcon | string | Allows a string of classes to add to the icon, in addition to the Spark classes. Intended for overrides. |
| additionalClassesIconLink | string | Allows a string of classes to add to the icon anchor link, in addition to the Spark classes. Intended for overrides. |
Promo With Icon
Promos can be used with an optional clickable illustration or icon.
Restrictions
- Illustration/icon must have a descriptive alt tag if it's an image or a descriptive title tag if the format is SVG.
Angular
To add in an icon, the media input should be set to 'icon'. You will also need to provide the icon name to iconType and the desired link to iconHref.
<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="#bell" />
</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>
<sprk-promo title="Title" media="icon" iconType="bell" iconHref="sparkdesignsystem.com" additionalClassesIcon="sprk-c-Icon--l sprk-b-TypeBodyTwo" cta="button" ctaText="Learn More">
Lorem ipsum dolor. Sit amet pede. empus 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
Promos can be used with an optional clickable image.
Restrictions
- Image must have a descriptive alt tag.
Angular
To have a Promo component with an image, set the media input to 'image'. You will also need to provide values for imgAlt and imgSrc.
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>
<sprk-promo title="Title" media="img" imgAlt="placeholder" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/flower.jpg" cta="button" ctaText="Learn More">
Lorem ipsum dolor. Sit amet pede. empus 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
The default position for media in Promos is on the left side. You may choose to have the media be on the right instead.
Angular
To have the Promo media be rendered on the right side of the content, set the mediaRev input to 'yes'. The default if mediaRev is 'no' or not set at all is the media on the left side.
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 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>
<sprk-promo title="Title" mediaRev="yes" media="img" imgAlt="placeholder" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/flower.jpg" imgHref="https://sparkdesignsystem.com" cta="button" ctaText="Learn More">
Lorem ipsum dolor. Sit amet pede. empus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur.
</sprk-promo>