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.

Radius

The shape system currently supports three types of radius that can be applied to component corners

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

Types

The shape system currently supports three types of radius that can be applied to component corners to suit your brand and app:

  1. Default radius
    The default radius is applied to virtually all components such as cards, menus, dialogs,...

  2. Baseline radius of 50% of the height
    The radius of 50% of the element height is applied on 2 elements: primary & secondary buttons and tags.

  3. Circle shape
    The circle shape is reserved for the profile picture on the services interfaces.

Default radius

Components such as cards, menus and dialogs all use 0.5rem rounded corners.

If one component contains another, or a colored block, then that other component or block will also have rounded corners.

Baseline radius of 50% of the height

The roundest components have a baseline radius of 50%, such as tags or on the the button corner.

Buttons shapes

The button is a special case because it has 3 rounded corners smaller than the default value (0.3 rem) and a round corner with a baseline radius of 50% of the height.

Circle shape

Single usage for the profile picture on the services interfaces.


Composition

If 2 components (cards,...) are sticked together, the corners where they are sticked are at 0.

Depending of the breakpoint

Be aware that composition can change depending of the breakpoint, so some corners can be rounded in mobile and square in desktop, and vice versa.


Multimedia

Images and videos do not have rounded corners, their corners are straight.

last modified: 17/03/2022 12:25:03

Default radius

All <div> element with a panel class have 0.5 border radius defined by CSS.

Radius depending on the composition

To follow the usage rules when two panels are sticked together, add those class on <div> element with a panel to remove rounded corners:

All breakpoints:
rs-no-radius

Per side and breakpoint:

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipiscing elit

Small up:
Top: rs-no-radius-top
Right: rs-no-radius-right
Bottom: rs-no-radius-bottom
Left: rs-no-radius-left
All: rs-no-radius

Small only:
Top: rs-no-radius-top-so
Right: rs-no-radius-right-so
Bottom: rs-no-radius-bottom-so
Left: rs-no-radius-left-so
Medium up:
Top: rs-no-radius-top-m
Right: rs-no-radius-right-m
Bottom: rs-no-radius-bottom-m
Left: rs-no-radius-left-m


Medium only:
Top: rs-no-radius-top-mo
Right: rs-no-radius-right-mo
Bottom: rs-no-radius-bottom-mo
Left: rs-no-radius-left-mo
Large up:
Top: rs-no-radius-top-l
Right: rs-no-radius-right-l
Bottom: rs-no-radius-bottom-l
Left: rs-no-radius-left-l

Radius on another element than a panel

If you use another element than a <div> with a panel class and it has to have rounded corners, add rs-radius class on the element.


Circle shape

Perfect circle

You could set the width. See Width documentation to learn more.

rs-radius-circle