---
# System prepended metadata

title: Patches
tags: [DS DONE]

---

---
tags: DS DONE
---

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

# Patches
Patches provide a way to highlight two kind of content: informational and promotional messages. They are not for general use and can only be used in the context of a promotion, a launch, or to convey a notable fact about a product or service.  

It exists in standalone on image or in combination with a text description/price.



# Usage

## Types

Different types of patches are available for different type of informations.


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

1. **Informational patches**
This one is to be used as point of attention to communicate something to the customers. Keywords as "New", "Only for new customers", "Pre-order" ect. 
In option: followed by a short description in body text or price.

2. **Promotional patches**
To mention a promo, a marketing technique that is used to entice customers to purchase a product, the promotional patch is used. Some examples: "Web promo", "Free", "1 month for trial" or another short copy to be attractive. 
In option: followed by a short description in body text or price.





## Anatomy

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

1. **Container**
A container is displayed behind the label with a solid color. A minimum width is fixed for type of patches. 
> []INFO BOX : Container shape
More info about the shape below

2. **Label**
Label is the keyword message element. Try to be as concise as possible.

> []INFO BOX : Label text
More info about the label text below

3. **Description text / price**
A short explicite text and/or price can be displayed on the right of the patch.

## Shape
> [name=Alexandra: j'ai tenu compte ici de ta remarque] The shape is inspired by our symbol. 3 rounded corners and a straight corner. It should be oriented in the general direction of the main object in the lay out.

## Label text

To ensure the coherency of the message accross all Proximus plateform, some label texts are defined:

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


### Web promo

"Web promo" is the promo only available online, not in the shops. 
* Copy in patch EN: **Web promo**
* Copy in patch FR: **Promo web**
* Copy in patch NL: **Webpromo**

### Free 
"Free" is the mention to apply for a free product, accessory, service ect. 
Example:
* Copy in patch EN: **Free installation**
* Copy in patch FR: **Installation gratuite**
* Copy in patch NL: **Gratis installatie**

### 1 month for trial
"1 month for trial" is a TV promo. The "1" is displayed in number because it is quantity, not.
* Copy in patch EN: **1 month for trial**
* Copy in patch FR: **1 mois d'essai gratuit**
* Copy in patch NL: **Test 1 maand gratis**


> [Info box: Use a capital letter at the beginning of the copy in the patch as for the sentence. The copy of the patch cannot written in uppercase.]

### Other message
Try to be as concise as possible. No sentence, only keywords in one line on mobile and desktop.

> [name=Laureen Delhaye] On ferait bien un do/dont avec une explication pour montrer que ça ne peut JAMAIS aller en 2 lignes? Qu'en penses-tu Alex? J'ai demandé la correction mais pour l'instant on a ça en prod:
> ![](https://i.imgur.com/1fp0Geh.png)
> Do/dont comme ici pour le label également
https://dsdev.proximus.com/pagesDS/20__Components/Text_fields__draft/

> règles d'usage...
> + icône dans un patch? oui / non ...
> + prix dans un patch ? oui / non ...
> + patch cliquable ? oui / non ...


## Composition

> [name=Laureen Delhaye]Texte à côté du patch ou aussi en dessous desktop & mobile ? Placement du patch dans/sur une boîte ... 

---

# Style
## Sizes

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



|  | Attribute | Mobile | Tablet/Desktop  |
| -------- | -------- | -------- |-------- |
| 1. Container paddings     | top and bottom     | 0.3 rem     |
| 2. Minimum container paddings     | left and right     | 1.0 rem     |
| 3. Minimum width     |      | 6.4 rem     | 8.4 rem | 
| 4. Radius     | Top left, top right, bottom left <br> Bottom right     | 1.4 rem <br> 0     |
| 5. Patch margin      | right     | 2 rem     |
| 6. Label     | Font weight <br> Font size <br>      | 1.0 rem     |
| 7. Description text / price     | Font weight <br> Font size <br>     | Regular or [price regime](https://) <br> Body text size     |

> [name=Laureen Delhaye]
> 4. Radius > image à adapter car il faut donner les 4 radius + utiliser plutôt un rond sur l'image, comme ici: ![](https://i.imgur.com/xrGy0Zt.png)



## Colors

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

### Light theme

|  | Attribute | Value |
| -------- | -------- | -------- |
| Container     | Informational patches <br> Promotional patches     | Blue <br> Red     |
| Label     | Font color      | white     |
| Description text / price     | Font color     | Body text color or [price regime](https://)     |


### Dark theme
> [Note pour Laureen, je ne retrouve plus les valeurs du red light theme et dark theme qui ont été changées récemment?]
> 
> [name=Laureen Delhaye] Les nouvelles couleurs sont ici mais pas encore documentées dans le DS (changements css/html prévu dans ce sprint):https://hackmd.io/@laudlh/HkWuoYcQI/edit

> [Note pour Laureen: j'ai un souci avec la décision d'afficher le texte après le patch et non en-dessous. Juline fait les 2.] 
>  [name=Laureen Delhaye] Quoi qu'on décide, la composition desktop & mobile doit être documentée dans la partie usage