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.

Empty states

Empty states are moments where there is no data to display to the user.

last modified: 06/12/2021 10:00:05

Overview

Empty states are a simple yet extremely powerful way to keep a user informed, supported, and on a productive path. They provide opportunities to communicate what the user would see if they had data, while providing constructive guidance about next steps.

With just enough contextual guidance, empty states ensure a smoothness of experience, especially when things aren’t working as expected.


Anatomy

Basic empty state with default link

  1. Illustrative icon
    A non-interactive image that relates to the situation To list the advantages or what a product contains or not, in this case the advantage is active or non active. Only the check and cross icons can be used.
  2. Title
  3. Description
  4. Default link (optional)
    A default link referenced in the body copy above.
last modified: 06/12/2021 10:00:05

Sizes and colors

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

Empty state

This HTML could be used inside all components (section, panel, gridding...).

Positif

No results found

sit amet lorem orci.Quisque nisl dolor aliquam non ultricies vel ornare eget odio. Quisque vulputate rutrum neque. Nunc ac metus a nisi ornare dapibus at ut urna. Nulla facilisi. Morbi arcu lorem consectetur at accumsan nec ultrices vel nunc. Nulla facilisi. Etiam quis eros tellus non faucibus nibh. Sed id

Link

Negatif

No results found

sit amet lorem orci.Quisque nisl dolor aliquam non ultricies vel ornare eget odio. Quisque vulputate rutrum neque. Nunc ac metus a nisi ornare dapibus at ut urna. Nulla facilisi. Morbi arcu lorem consectetur at accumsan nec ultrices vel nunc. Nulla facilisi. Etiam quis eros tellus non faucibus nibh. Sed id

Link