Vistaprint
styleKeyspromoBar

Promo Bar

A promo bar contains a promotional message, typically a Promo Code plus other promotional information.

It is used directly above a hero.

Playground

Segmented

Each direct child of the Promo Bar will be treated as its own "segment". The Promo Bar will automatically put a small amount of spacing between each segment. It will try not to put a line break in the middle of a segment, and will instead try to put breaks between segments. If you want the promo bar's copy to line-break normally, place all the content inside a single segment.

Up to 50% off business cards

Code:

BIZSAVE

View Details

Share
Share
jsx
<div class="promo-bar">
  <p>Up to <strong>50% off</strong> business cards</p>
  <p>Code: <span class="promo-code">BIZSAVE</span></p>
  <p><a class="link" href="#">View Details</a></p>
</div>

Skins

"discount" skin

The "discount" skin is for when the promotional message represents a discount or savings.

Up to 50% off business cards with code:
BIZSAVE
Share
Share
jsx
<div class="promo-bar promo-bar-skin-discount">
  Up to <strong>50% off</strong> business cards with code:
  <div class="promo-code">BIZSAVE</div>
</div>

"holiday" skin

Up to 50% off business cards with code:
BIZSAVE
Share
Share
jsx
<div class="promo-bar promo-bar-skin-holiday">
  Up to <strong>50% off</strong> business cards
</div>

"inverse" skin

Up to 50% off business cards with code:
BIZSAVE
Share
Share
jsx

Components

PromoBar

PropTypeDefaultDescription
skin"discount" | "holiday" | "standard" | "inverse"standard

The visual style of the PromoBar

All other props are forwarded to the element specified in thecomponentprop(default: <div/>)