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.

Rating

Representation of user satisfation or opinion, commonly used to gather quick feedback across various contexts such as product reviews, surveys and user experience assessments.

last modified: 30/08/2023 14:55:07

Smiley Ratings

Smiley ratings are used to enable users to provide emotional feedback on an experience, product or service. They are particulary effective for collecting quick and intuitive reactions. It can be integrate into surveys, product evaluations, user feedback, and more.

smiley rating overview

States

smiley ratings states
  1. Default state
    The default state displays the five smileys in a neutral state. User can click or tap on the smileys to select their mood level.
  2. Hover state
    When user hovers over a smiley with their mouse, the smiley visually changes to indicate that it can be selected. This enhances the user experience by clearly indicating interactivity.
  3. Selected state
    Once user clicks or taps on a smiley, it changes color to indicate that it has been selected with the corresponding mood level. A text area appears to give more details or suggestions about the user experience.

Anatomy

smiley ratings anatomy
  1. Instructions
    Clear and concise message that helps the user provide feedback.
  2. Ratings
    Smileys representing emotional states about the experience.
  3. Rate legend
    From very bad to excellent. Helps the user to understand the rate scale of the smileys.
  4. Text area
    Allow user to give more details or suggestions about his experience. More info about text area.
  5. Button
    Allow user to submit his feedback.

Specific legend

To ensure the consistency of the legend accross all Proximus plateforms, please use these rates label:

EN FR NL DE
Bad - Excellent Mauvais - Excellent Slechte - Uitstekend Schlecht - Ausgezeichnet
last modified: 30/08/2023 14:55:07

Sizes and colors

last modified: 23/08/2023 13:30:08

Default rating

Accessibility

<legend> is required as Rating is using radio buttons. Then same rule is applied: if the title should not be displayed, it should be readable for screen reader only with show-for-sr added class.

<label> needs title="xxx" attribute and icon <i> needs aria-label="xxx" attribute. Put same value for both and maintain consistent values for all languages.

Since the description of the icon (bad, excellent) is purely decorative, aria-hidden="true" is added to rs-rating-legend to be ignored by screen readers.

Razor

The rating can be generated with the helper called @rsRating.rsStd .

Here is the list of all the parameters for this helper:

Name Purpose Default value
sLegend Fieldset legend "Note this answer"
sName Radio name, used also to generate ID "radioRates"
dIcons List of icon name new [] {"Mood-very-bad", "Icon-Mood-unhappy", "Icon-Mood-neutral", "Icon-Mood-happy", "Mood-joy"}
dLabels List of label name new [] {"Bad","Not good","Neutral","Good","Excellent"}
Note this answer

Default negative

You just need to add rs-neg class as parent of any rs-rating version to have it with negative colors.

Note this answer