---
# System prepended metadata

title: Price tag
tags: [DS DONE]

---

---
tags: DS DONE
---


https://designsystem.proximus.com/pagesDS/20__Components/Prices/

# Price tag
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. 
# Usage

## Types

Depending the message conveyed by the price, there are specific colors to be used:

### Standard
Price is displayed to inform the user with the raw price in primary color. 

![](https://i.imgur.com/E3AyQwB.jpg)



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

![](https://i.imgur.com/EUqhaBQ.jpg)




### Free
description TBD
>[name=Arnaud] Est-ce que le free doit faire partie des "Types"? Si oui, pourquoi? 
![](https://i.imgur.com/K7aGz6Z.jpg)

> [name=Laureen Delhaye] Il faut qu'on documente quelque part ce prix qui utilise en fait visuellement le promo ... une option du prix promo? Il faudrait que je regarde si on peut avoir d'autre texte que "Free"...


## Sizes

Price tags are constructed in a way that it’s highlighted from the rest of the content. To ensure this highlight, we define 3 sizes as options:

![](https://i.imgur.com/zHbH4xT.jpg)


1. **Medium**
2. **Small-Medium**
3. **Small**


## States

### Basic
![](https://i.imgur.com/kH85NHk.jpg)

### Focus
When user navigates with the keyboard, focus indicates which choice is hightlighted

![](https://i.imgur.com/PWkH7LH.jpg)

### Disabled
Disabled description

![](https://i.imgur.com/ZSIQSZe.jpg)

### Exceed
description TBD
>[name=Arnaud] C'est quoi exceed price? 
>
![](https://i.imgur.com/6YuxJfw.jpg)

> [name=Laureen Delhaye]C'est pour MyPxs quand tu dépasses ton forfait je pense. 
## Anatomy

![](https://i.imgur.com/Y3rswk2.jpg)


1. Text before/after the price
2. Euro sign
3. Price unit
4. Price decimal
5. Strikethrough price

---

## Style

### Sizes

#### Medium

![](https://i.imgur.com/JMwPjut.jpg)



|     | Mobile                 | Tablet        |Desktop        |
| --- | ---------------------- | --------------------- | --------------------- |
|   **1. Text before/after price**   | Size 4</br>Regular     |                      |
|  **2. Euro sign/Free**    | Size 9 </br> Extrabold | 2.7rem </br>Extrabold |
| **3. Price unit**     | 2.4rem </br>Extrabold  | Size 9 </br>Extrabold |
|    **4. Price decimal**  | Size 5 </br>Extrabold  | Size 4 </br>Extrabold |
|    **5. Strikethrough price** | Size 4 </br>Regular    | -                     |



#### Small-Medium
![](https://i.imgur.com/wjE1JyA.jpg)

|                          | Mobile | Tablet/Desktop |
| ------------------------ | ------ | -------------- |
| **1. Text before/after price** |  Size 4</br>Regular | -        |
| **2. Euro sign/Free** | Size 6 </br>Extrabold  |   2.1rem </br>Extrabold       |
| **3. Price unit** |  Size 9</br> Extrabold |     2.6rem </br>Extrabold     |
| **4. Price decimal** |  Size 4</br> Extrabold  |  Size 4 </br>Extrabold         |
| **5. Strikethrough price** | Size 4</br>Regular | -   |

#### Small

![](https://i.imgur.com/DHPC26r.jpg)

|                          | Mobile | Tablet/Desktop |
| ------------------------ | ------ | -------------- |
| **1. Text before/after price** |  Size 4</br>Regular  | -        |
| **2. Euro sign/Free** | Size 5</br> Extrabold  |  -          |
| **3. Price unit** | Size 6</br> Extrabold  | 2.0rem </br>Extrabold          |
| **4. Price decimal** | Size 4 </br>Extrabold   | -          |
| **5. Strikethrough price** | Size 4 </br>Regular | -        |


### Colors

#### Light theme
![](https://i.imgur.com/2gGtulU.jpg)



|                | Attribute  |                  | Value                |
| -------------- | ---------- | ---------------- | -------------------- |
| **1. Basic**   | Font color | Text </br> Price | #252525 </br>#5C2D91 |
| **2. Promo**   | Font color | Text </br> Promo price | #252525 </br>#EE2E5D |
| **3. Free**    | Font color | Text </br> Free  | #252525 </br>#EE2E5D |
| **4. Disable** | Font color |                  | #636363  |
| **5. Exceed**  | Font color |                  | #B30000 |


#### Dark theme
![](https://i.imgur.com/Rx9TJ61.jpg)



|  | Attribute |  |  Value    |
| -------- | -------- | -------- | --- |
|      **1. Basic**       |   Font color       |         |    #FFFFFF |
|    **2. Promo**        |    Font color      |    Text </br> Promo price      |  #FFFFFF</br>#EE2E5D    |
|  **3. Free**     | Font color   | Text</br>  Free   |   #FFFFFF</br> #EE2E5D   |

