Category boxes

Overview

The category box is a panel acting like an entry point. There are no CTAs as it is fully clickable. It can contain a title, icons, content text, prices and promo patches.

Live demo (For Proximus employees)

---

Anatomy

Here is a quick overview of what a category boxe contains to better understand this documentation:

1. Title
   The title is mandatory and either in positive (purple) or negative (white)
2. Icons
   Icons are optional in the category boxes and are either in positive (purple) or negative (white)
3. Content
   Content is optional and either in positive (black) or negative (white). Copy should be brief
4. Patch
   Patch is optional
5. Price
   Price is optional. It can be a default price in positive (purple) or negative (white). Or a promo price in positive (promo red) or negative (promo red or white)
6. Arrow
   The arrow is always at the right and middle of the category boxe. It indicates that the boxe is clickable without a CTA.

---

Gridding

You can have a maximum of 3 category boxes per row in desktop.
In mobile you can only use one category box per row on a grid 12.

---

Accessibility

In this component, HTML elements are added on top of the image. This content is in positive or negative mode and this affects the creation of the image. Image colors should be carefully considered, with legibility and accessibility as paramount concerns.

Positive mode

Negative mode

---

Best practices

Respect the margins and safe areas in the template and make sure that the main content isn’t placed behind the title, copy or the arrow (e.g.: main character, faces, devices, objects).