12 #premium Premium propagation

Items used to promote premium features

Source: src/css/components/premium.less, line 1

12.1 #premium.flag .premium-flag

Small yellow dot with crown inside

Example

Markup

<div class="premium-flag"></div>

Source: src/css/components/premium.less, line 7

12.2 #premium.get-premium .get-premium

Promo (ribbon or box) to promote premium features on the web

Examples

Default styling

Go Premium

.get-premium--menu-block

promo in menu

.get-premium--ribbon

promo in ribbon

Go Premium

Markup

<section class="get-premium [modifier class] size-l fg-white">
             <div class="centered">
                 <div class="premium-button">Go Premium</div>
             </div>
         </section>

Source: src/css/components/premium.less, line 33

12.3 #premium.premium-button .premium-button

Button premium styles

Example

Buy Premium!

Markup

<div class="premium-button">Buy Premium!</div>

Source: src/css/components/premium.less, line 67

12.4 #premium.premium-chip .premium-chip

Small chip elements to inform user what he/she will miss when subscription ends

Example

There is an issue with you subscription

Markup

<div class="premium-button premium-chip"><i class="premium-chip-close">There is an issue with you subscription</i></div>

Source: src/css/components/premium.less, line 99