---
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.


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


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:


### 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:
> 
> 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


| | 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: 

## Colors


### 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