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.

Patches

Patches provide a way to highlight two types of content: informational and promotional messages.

last modified: 07/10/2021 15:50:04

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:

  1. Promotional patch
    Used mention a promo, a marketing technique that is used to entice customers to purchase a product.
  2. Informational patch
    Used as point of attention to communicate informational messages to the customers.
  3. Eco patch
    Used to communicate ecology-related information, such as when one delivery choice is more environmentally friendly than another.
  4. Multi-mobile advantage patch
    Used for the "extra mobile advantage" of the Flex pack.
  5. 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

  1. Default state
    State visible by default.
  2. 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.
  3. Disabled state
    State visible when the element is not yet accessible due to pre-requisite actions.

Ribbon - Recommended banner

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

Anatomy

Patches

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

Ribbon - Recommended banner

  1. Container
    A container is displayed around the text label with a gradient color.
  2. 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
  1. Top left default
  2. Top left + overlap
Mobile
  1. Top left default
  2. Top left + overlap
  3. Fullwidth

Theming

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.

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

Sizes and colors

Shape

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.

last modified: 17/03/2022 12:00:04

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

Promo

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

Promo
Promo
Promo
Promo

Info patch

To create a info patch, use rs-patch-info instead of rs-patch-promo

New

Black Friday patch

To create a black friday patch, use rs-patch-blackfriday instead of rs-patch-promo

Black Friday

Negative

Black Friday

Eco patch

To create a eco patch, use rs-patch-eco instead of rs-patch-promo

Eco

Disabled patch

To create a disabled patch, add rs-disabled around (or on the section).

Accessibility

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.

Accessibility

Also add aria-hidden="true" to the section/div disabled to hide it for screen readers.


Advantage patch

Multi-mobiles advantages

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.

Multi-mobiles advantages

Disabled

Multi-mobiles advantages

Belfius advantage patch

Belfius advantages

Negative

Belfius advantages

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

Accessibility

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.

Accessibility

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

Promo

Mobile vertical alignment in the middle. A partir de instead of €25.50 19.99 /mois/pour 5 appareils (HTVA)

Promo

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.

Promo

A partir de instead of €25.50 19.99 /mois/pour 5 appareils (HTVA)

Negative

Promo

A partir de instead of €25.50 19.99 /mois/pour 5 appareils (HTVA)


Promo patch tooltip opening an overlayer


Theming

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.