diff --git a/source/development/user-interface/css-classes.rst b/source/development/user-interface/css-classes.rst
index a2effc2e2..98252cca4 100644
--- a/source/development/user-interface/css-classes.rst
+++ b/source/development/user-interface/css-classes.rst
@@ -43,6 +43,19 @@ Example usage
 
       <blockquote class="chill-user-quote">{{ entity.remark|nl2br }}</blockquote>
 
+Boxes
+=====
+
+CSS Selector
+   :code:`chill__box`
+In which case will you use this selector ?
+   When displaying some data in a nice box
+Example usage
+   .. code-block:: html+twig
+
+      <span class="chill__box green">A nice box with green background</span>
+      <span class="chill__box red">A nice box with red background</span>
+
 
 
 Mixins