Promo Code
A promo code is a code that the user can enter to receive a discount at checkout.
Designer Guidelines
If the promo code has a label, it should say "Code:" and not "Promo Code:".
Display a promo code with an offer.
Make the code easy to remember, and easy to input in the promo drawer and at checkout.
Make the promo code live text whenever possible, so that users can cut and paste.
Developer Considerations
To present colored text inside a promo code, use the Typography features that set color.
jsx
<PromoCode>PromoCode</PromoCode>
<span class="promo-code promo-code-skin-skinnname">SOMEPROMOCODE</span>
Live Example
EXAMPLE PROMOCODE
You can change the color of the text on the Promo Code using our Typography component, which offers text colors:
using Typography's white text