Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Prices

The price tag is used to emphasize the pricing of a special offer or a product. It's constructed in a way that it's highlighted from the rest of the content.

last modified: 30/09/2021 11:10:06

Types

Price tags are constructed in a way that it's highlighted from the rest of the content. To ensure the highlight from the rest of the content, 3 sizes exist:

  1. Small
  2. Small-Medium
  3. Medium

States

Standard

Price is displayed to give to the user the price of a product.

Promo

Price is subject to a promo, the normal price is displayed in a strikethrough body text and the promoted price is higlighted in promo color.

The promotional price is also used to communicate the free of charge of a product or a service such as the installation.

Promo price on purple background

If the promo price is used on a Proximus purple background, for accessibility, the promo price should be completely white. You have to use the inverted price.

Exceed

This price is used to show the user when he has exceeded the budget foreseen in his subscription.

Disabled

This price is used when a product is no longer available

Prices for other suppliers

If you need to display a competitor's price in a comparison context for example, you should use this neutral price:


Anatomy

  1. Promo indicator
  2. Euro sign
  3. Price unit
  4. Price decimal
  5. Strikethrough price
  6. Period

Best practices

Price decimal depending of language

English

  • No space
  • Full stop to separate decimals

As of instead of €25.50 19.99 /month

Do

Dutch, French and German

  • 1/1 space in html
  • Comma to separate decimals

A partir de au lieu de € 25,50 19,99 /month

Do

Remove decimal numbers if ".00"

As of instead of €25.50 19 /month

Do


As of instead of €25.50 19.00 /month

Dont

Keep 2 decimal numbers in smaller size

As of instead of €25.50 19.99 /month

Do


As of instead of €25.50 19.99 /month

Dont

Strikethrough price: all the numbers in the same size

€25.50

Do


25.50

Dont

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 08/09/2022 10:20:06

Prices have a template to ensure specific style of each element composing it. There are different kinds of prices (normal, promo, negative...)

Default prices

To create a price , the desired size price class should be added to <span> .
There are 3 sizes of prices: small = rs-price-s | smedium = rs-price-sm | medium = rs-price-m
And there are different kinds of prices (promo, negative, free,...) which have each one their own class that should be added to price size class mentioned above: ( rs-price-promo , rs-price-inverted , rs-price-semi-inverted ,...).

Depending on the language, decimals and spaces have different formating but by default we use english format with decimals represented by a "."
The "€", the whole amount part and the decimals have each one a specific class as they have different sizes:
€= rs-euro | amount's whole part= rs-unit | amount's decimal part= rs-decimal .
To ensure the price remaining as an group ("€" with the amount) and never breaking on separate lines, a <span class="rs-nowrap"> should wrap the € and the amount parts.

Razor

All @rsPrice objects can receive all following optionnal parameters in this exact order:

Parameter Exemple
Price 19.99
Old Price (only for promo and free prices) 24.99
"extra class" "rs-price-disabled"

From 19.99 /month
From 19.99 /month
From 19.99 /month

Default negative prices

To have a negative price, rs-price-inverted should be added to rs-price .

19.99
19.99
19.99

Disabled prices

Disabled prices

All different kinds of prices can be displayed as disabled just by adding rs-price-disabled class to any price.

19.99
19.99
19.99

Promo prices

To have a promo price, rs-price-promo should be added to rs-price .
The old price should be added before the new price whitin a <del> without any specification for €, amount nor decimals.

Accessibility

Unfortunately screenreaders don't interpret <del> so the 2 prices are read one after the other without any specification so a text espacially for screenreaders should be added within the <del> before the old price:
EN: <span class="show-for-sr">Instead of </span>
NL: <span class="show-for-sr">In plaats van </span>
FR: <span class="show-for-sr">Au lieu de </span>
DE: <span class="show-for-sr">Anstelle von </span>

instead of €24.99 19.99
instead of €24.99 19.99
instead of €24.99 19.99

Promo negative prices

To have a negative promo price, rs-price-inverted should be added to rs-price rs rs-price-promo .

Strikethrough price are included in <del> which needs a special attention for accessibility.

Accessibility

If the promo price is used on a Proximus purple background, for accessibility, the promo price should be completely white with rs-price-inverted class.

instead of €24.99 19.99
instead of €24.99 19.99
instead of €24.99 19.99

To have a promo price on a black background, rs-price-semi-inverted should be added to rs-price . This promo price can't be used on a purple background (see exemple above).

instead of €24.99 19.99
instead of €24.99 19.99
instead of €24.99 19.99

Free prices

A Free price is like the promo price.
The strikethrough price is optional.

instead of €19.99 Free
instead of €19.99 Free
instead of €19.99 Free

Prices for other suppliers

To have a "neutral" price typically used for any other than Proximus products, rs-price-neutral should be added to rs-price .

19.99
19.99
19.99

Exceeded prices

To have an exceeded price, rs-price-exceed should be added to rs-price .

19.99
19.99
19.99

Price format per language

All the examples above are using the default english format: a "." as decimal delimiter and no space between the € and amount.
French, dutch and german have a different: a "," as decimal delimiter and a space between the € and amount.

EN: instead of €24.99 19.99
FR: au lieu de € 24,99 19,99
NL: in plaats van € 24,99 19,99
DE: Anstelle von € 24,99 19,99