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.


You'll find here all the upcoming changes and the release notes concerning HTML, CSS and Javascript libraries.

If needed, check Confluence's Release Management - Dashboard page.

last modified: 26/02/2024 08:55:08

Coming up changes:

  • deprecatedLazy load: <img> with data-src must be replaced by loading="lazy" , browser native functionnality (DEV).
Release expected date: TBD

Released to production 2024-02-26:

  • updateWarning color: Text color #A55D00 and background color #F58221 changed to #AC5915.
    Components impacted: status, message box, timeline, text color, donut graph, progress bar. No html change, css only.
  • fixedOverlayer: Image overlayer, display: flex added only when overlayer is opened.
  • newAction links: "View" and "Filter" added.
  • newInput type file: simplified with HTML code using browser's native functionnality.
  • deprecatedInput type file: rs-form-label rs-form-label-file , rs-form-file-input and rs-form-file-btn .
  • fixedButton in form: Moved min-width: auto from "form" to "rs-form-items-group".
  • updateForm waiting input: dots replaced by spinner. No html change, css only.
  • updateWaiting Button : dots replaced by spinner. No html change, css only.
  • deprecatedSpinner: .rs-spinner-neg replaced by rs-neg as parent of rs-spinner to simplify.
  • updateSpinner: a single css animation for all themes, no more svg depending on segments.

Released to production 2024-02-02:

  • updateLazy load: Take into account Webp image format
  • deprecatedFoundation data-interchange: $(document).foundation('interchange', 'reflow'); is deprecated and must be replaced by inception.lazyLoad.reflow(CONTEXT);
  • newOpen Anchor: function for open url anchor on page load
  • deprecatedhasAnchorOrParameterInUrl: function with hasAnchorOrParameterInUrl() are all deprecated. Please replace it by inception.openAnchor() if content appear after page loaded or remove it.

Released to production 2024-01-31:

  • updateIcons: Internet icons updated to new design. Icons impacted: icon-Internet, icon-Internetlaptop, icon-Internetmobile, icon-Internettablet.
  • removedEpic classes: rs-sbox-epic (selectable box), rs-accordion-panel-bg-epic (panel accordion), rs-epic, rs-logo-epic, rs-logo-epic-tit, rs-logo-epic-product, rs-logo-epic-tit-block (Epic logo), rs-ctable-epic, rs-ctable-panel-highlighted-txt-container-epic (tables)
  • removedZurb Foundation: removed unused classes

Released to production 2023-12-19:

  • newPatch recommended: new SME color
  • deprecatedPatch recommended full: better naming class, replace rs-patch-recommended-full by rs-patch-recommended-full-so
  • updateHeadings: SME becomes like EBU
  • newIcons: AI (Artificial Intelligence) icon added.
  • deprecatedStatus: Simplified and consistent classes: rs-status-ok becomes rs-success, rs-status-error becomes rs-error, rs-status-ongoing becomes rs-ongoing, rs-status-warning becomes rs-warning, rs-status-unlimited becomes rs-unlimited.
  • newAction links: Copy action link has been added.
  • updateIcons: Twitter icon is replaced by X icon but the class name remains the same (icon-Twitter)
  • deprecatedTags: for negative version, rs-neg as parent class is sufficent, no need to add rs-tags-neg anymore.
  • deprecatedMessage boxes & message box overlayer: for negative version, rs-neg as parent class is sufficent, no need to add rs-messagebox-neg anymore.
    For different states, the class have been simplified: rs-msgbox-success is replaced by rs-success, rs-msgbox-error is replaced by rs-error, rs-msgbox-warning is replaced by rs-warning and rs-msgbox-ongoing is replaced by rs-ongoing.
  • deprecatedBackground colors: for negative version, rs-neg as parent class is sufficent to rs-bg-clickable, rs-bg-ac, rs-bg-hover, rs-bg-hover-second, rs-bg-focus and rs-bg-disabled background color class.
  • deprecatedSwitch: for negative version, rs-neg as parent class is sufficent, no need to add rs-switch-neg anymore.
  • newForms: styling added to allow native input type="date".
  • newGradient: new gradient for SME

Released to production 2023-12-20:

  • fixedScarlet: title neg fix

Released to production 2023-12-01:

  • newBar chart: CSS and HTML (CSS load)
  • newCSS load: function for CSS loaded on demand

Released to production 2023-11-14:

  • fixedScarlet theme: Proximus extra color (light colors --> grey2, dark colors --> red primary)
  • removedMessage box: unused congratulations message box removed from css.
  • newMessage box: sustainability message box
  • updateEntrypoint: disabled version works with rs-disabled as parent, no need to add rs-entrypoint-disabled anymore.
  • updateNegative & disabled text color: rs-neg + rs-disabled works together to give correct text color. rs-disabled changes text color to disabled.

Released to production 2023-11-07:

  • fixedShow/Hide class: "display: revert" ISO inherit (Foundation)
  • updateHeader: icon search visible outside hamburger menu on mobile
  • updateFooter: grey background for contact zone becomes full width
  • fixedCheckbox label size: adding min height and width to improve alignment
  • fixedTextarea: focus and filled

Released to production 2023-11-06:

  • updateScarlet icons: icon-Applications + icon-Appointment + icon-Freeservices
  • fixedForms: input type date icon visual bugfix

Released to production 2023-10-27:

  • updateSearch autocomplete: HTML accessibility review and add JS webcomponent attribute
  • fixedScarlet theme: MyScarlet first section and content header gradient switched to full red primary color.
  • newSearch autocomplete: add webcomponent JS with keyboard functionnality (accessibility)

Released to production 2023-10-09:

  • fixedMedia device: CSS pointer event none on device image to keep click on video
  • updateNavigation arrows: HTML and CSS, could be also a button tag
  • newHeading mixing font weights: HTML example
  • newText colors: work with rs-neg class around

Released to production 2023-09-25:

  • newPatch: CSS 2 different recommended patchs SE and EBU
  • newGradient: CSS gradient from dark to purple
  • updateTables: CSS for responsive tables on mobile looking the same as on desktop
  • newEntry point: add HTML and CSS for extra zone
  • fixedForm: remove blur from form elements

Released to production 2023-09-20:

  • updateMessage box: HTML accessibility reviewed
  • deprecatedMessage box: inline message box with aria-live="assertive" role="alertdialog" is deprecated

Released to production 2023-09-13:

  • newInnovation icon for Scarlet: add HTML and CSS element + scarletIcons.woff2
  • newAction link Download: add HTML and CSS element
  • newRates smiley: add HTML and CSS element
  • fixedTable: usage of rs-scroll class
  • fixedSearch autocomplete: CSS corrections on list focus
  • fixedButton waiting: force icon arrow hide

Released to production 2023-08-10:

  • updateHeader 2022: CSS header flex to grid, mobile icon position update