Please don't forget to read Usage part of each element.
Patches
Patches provide a way to highlight two types of content: informational and promotional messages.
Types
Patches
Patches are used in the context of a promotion, a launch, or to convey a notable fact about a product or service. You can use on their own, on an image or in combination with a text description/price.
Different types of patches are available for different types of information:

-
Promotional patch
Used mention a promo, a marketing technique that is used to entice customers to purchase a product. -
Informational patch
Used as point of attention to communicate informational messages to the customers. -
Eco patch
Used to communicate ecology-related information, such as when one delivery choice is more environmentally friendly than another. -
Multi-mobile advantage patch
Used for the "extra mobile advantage" of the Flex pack. -
Belfius advantage patch
Used to highlight an advantage related to Belfius.

There is also a Black friday patch that can only be used during the Black Friday period for all promotions related to this event.
Clickable promo patch
When an explanation of the promotion must be given to the customer, the promo patch can be made clickable. An "information" icon is then added to the patch and when clicked an overlayer opens with all the explanations of the promotion. Only the promo patch can be clickable.

Ribbon - Recommended banner
Recommended banner is used in the context of Proximus' recommendation on a product or a service.

States
Patches

-
Default state
State visible by default. -
Hover/Focused state
State visible when the cursor hovers the clickable promo patch and triggered by keyboard navigation or click. Cursor becomes a pointer. Only the promo patch can be clickable. -
Disabled state
State visible when the element is not yet accessible due to pre-requisite actions.
Ribbon - Recommended banner

-
Default state
State visible by default. -
Disabled state
State visible when the element is not yet accessible due to pre-requisite actions.
Anatomy
Patches

-
Container
A container is displayed around the text label/icon with a solid color. -
Label
Label is the key message element and follows these rules. -
Description
A short explicit text and/or price can be displayed next to the patch. - Information icon (only for the clickable promotional patch)
Information icon informs the user that an overlayer will open to give more information. - Icon/Logo (only for the Advantages and Belfius patches)
Icon or logo illustrates the advantage patch.
Ribbon - Recommended banner

-
Container
A container is displayed around the text label with a gradient color. -
Recommended label
Label is the key message element.
Patch specifications
Patch with description
The most common composition is the description to the right of the patch, but it's also allowed to put the description below the patch.

Do

Don't
Shape
The shape of the promo, info and eco patches is inspired by our symbol and is composed with 3 rounded corners and a square corner. The square corner should be oriented in the general direction of the main object in the lay out.

Label
Best practices
- 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.
- Try to be as concise as possible. No sentence, only keywords to keep the label in one single line.
- Label text has to be in one line on mobile and desktop

Do
Keep the label on one single line.

Don't
Don't wrap the label in multiple lines.
Specific labels
To ensure the consistency of the message accross all Proximus plateforms, some label texts are predefined for the promotional patches:

EN | FR | NL | |
---|---|---|---|
Web promo Promo only available online, not in the shops. |
Web promo | Promo web | Webpromo |
Free Mention to apply for a free product, service,... |
Free installation | Installation gratuite | Gratis installatie |
1 month for trial For TV promo |
1 month for trial | 1 mois d'essai gratuit | Test 1 maand gratis |
Ribbon
The recommended banner can be placed differently depending of the breakpoints.
Desktop

- Top left default
- Top left + overlap
Mobile

- Top left default
- Top left + overlap
- Fullwidth
Branded component
Business and Enterprise Business Unit
As the secondary colors usage is defined by segment to follow brand identity, the ribbon is diffent for SE/EBU segments.

Sizes and colors
The shape is composed by 3 rounded corners and a square corner. The straight corner should be oriented in the general direction of the main object in the lay out, so the radius can change depending of the layout.
Default promo patch
To create a promo patch, add rs-patch-promo
and rs-patch-corner2
in a <div>
element. This <div>
include another <div>
with classes rs-patch-content
and text-center
Shape
The shape is composed by 3 rounded corners and a straight corner. The straight corner should be oriented in the general direction of the main object in the lay out, so the radius can change depending of the layout.
To change the radius, 4 classes exist: rs-patch-corner1
, rs-patch-corner2
, rs-patch-corner3
and rs-patch-corner4
Info patch
To create a info patch, use rs-patch-info
instead of rs-patch-promo
Black Friday patch
To create a black friday patch, use rs-patch-blackfriday
instead of rs-patch-promo
Negative
Eco patch
To create a eco patch, use rs-patch-eco
instead of rs-patch-promo
Disabled patch
To create a disabled patch, add rs-disabled
around (or on the section).
Also add aria-hidden="true"
to the section/div disabled to hide it for screen readers.
Disabled patch negative
To create a disabled patch neg, add rs-disabled-neg
around (or on the section). Why a negative class here? Because negative patch doesn't exist.
rs-disabled rs-disabled-neg
could be used together if needed.
Also add aria-hidden="true"
to the section/div disabled to hide it for screen readers.
Advantage patch
Overlapping
This kind of patch can be used in overlap. Just add rs-has-overlap
around the content and rs-is-overlapping
in the patch.
Disabled
Belfius advantage patch
Negative
Disabled
Recommended banner
To avoid problem with the boxes who have an overflow hidden property, always use the patch + the object you want to hightlight inside a <div>
with the class rs-has-overlap
.
Overlapping
This banner also exist in overlapping version in the top/left corner. Just add rs-is-overlapping
in the patch.
Overlapping full width in mobile
The overlapping version also exist in full width for small devices. Just add rs-patch-recommended-full
in the patch.
Disabled recommended banner
To create a disabled recommended banner, add rs-disabled
around (or on the section).
Also add aria-hidden="true"
to the section/div disabled to hide it for screen readers.
Negative disabled recommended banner
To create a disabled recommended banner, add rs-disabled-neg
around (or on the section). Why a negative class here? Because negative recommended banner doesn't exist.
rs-disabled rs-disabled-neg
could be used together if needed.
Also add aria-hidden="true"
to the section/div disabled to hide it for screen readers.
Promo patch with content
Here are some examples. Use the needed gridding depending of the wanted display. All kind of patch could be used.
Patch at the left of the content on mobile
Mobile vertical alignment in the middle. A partir de
instead of €25.50 €19.99
/mois/pour 5 appareils (HTVA)
Mobile vertical alignment above. A partir de
instead of €25.50 €19.99
/mois/pour 5 appareils (HTVA)
Patch at the top of the content on mobile
Pay attention to the space between the patch and the content on mobile. Place rs-margin-bottom1-s rs-margin-bottom2-m
in the patch.
A partir de
instead of €25.50 €19.99
/mois/pour 5 appareils (HTVA)
Negative
A partir de
instead of €25.50 €19.99
/mois/pour 5 appareils (HTVA)
Promo patch tooltip opening an overlayer
Pay attention to accessibility.
Modal Large
Modal Large subtitle
Branded component
EBU/SE segment
Recommended banner
The color of the patch will be adapt automatically if the body has the rs-ebu
or rs-se
class.