Badges
TBD
Usage
Lists are a groups of text, links, or images.
New Promotions
The ‘new’ badge informs the user of any new promotions.
Exclusive
The ‘exclusive’ badge tags content and promotions only available to certain users.
Free Promotions
The ‘Free Promotions’ badge tags any promotion thats free for the user to interact with.
Promotions
The ‘promotions’ badge is the default badge for any type of promotional content.
Odds Boost
The ‘Odds Boost’ badge informs the user that their odds have been increased.
Badge Recommended
N/A
Back Up Bet
N/A
Live
The ‘live’ badge informs the user that an event is in progress.
Anatomy
Badges are similar to buttons. They are made up of the badge container, Caption 2, and an optional 12×12 icon.
| A | Badge Container | C | 12×12 icon |
| B | Caption 2 (Uppercase) |
Variants
Variations of badge display types
| Component | Hex | State |
|---|---|---|
 |
#E9F4FA | New |
 |
#F3EBD2 | Exclusive |
 |
#E7F5DF | Free Promo |
 |
#E9D193 to #D4B962 | Promotion |
 |
#E9D193 to #D4B962 | Odds Boost |
 |
#303030 | Recommended |
 |
#FDEAEA | Live |
 |
#FFC700 | Back Up Bet |
Sizing
Badges can be fixed or flexible. A fixed badge width is determined by a specified width where as a flexible button is determined by the length of text.
Examples
Here are a few examples in context.
