diff --git a/docs/_static/images/development/aa-framework/css/callout-box.png b/docs/_static/images/development/aa-framework/css/callout-box.png
new file mode 100644
index 00000000..953a099c
Binary files /dev/null and b/docs/_static/images/development/aa-framework/css/callout-box.png differ
diff --git a/docs/_static/images/development/aa-framework/css/callout-boxes.png b/docs/_static/images/development/aa-framework/css/callout-boxes-alert-modifier.png
similarity index 100%
rename from docs/_static/images/development/aa-framework/css/callout-boxes.png
rename to docs/_static/images/development/aa-framework/css/callout-boxes-alert-modifier.png
diff --git a/docs/_static/images/development/aa-framework/css/callout-boxes-size-modifier.png b/docs/_static/images/development/aa-framework/css/callout-boxes-size-modifier.png
new file mode 100644
index 00000000..63e61aeb
Binary files /dev/null and b/docs/_static/images/development/aa-framework/css/callout-boxes-size-modifier.png differ
diff --git a/docs/development/custom/framework/css.md b/docs/development/custom/framework/css.md
index b398f37a..52e8199e 100644
--- a/docs/development/custom/framework/css.md
+++ b/docs/development/custom/framework/css.md
@@ -42,10 +42,24 @@ Callout-boxes need a base-class (`.aa-callout`) and a modifier-class (e.g.:
 `.aa-callout-info` for an info-box). Modifier classes are available for the usual
 Bootstrap alert levels "Success", "Info", "Warning" and "Danger".
 
-![Alliance Auth Framework: Callout Boxes](/_static/images/development/aa-framework/css/callout-boxes.png "Alliance Auth Framework: Callout Boxes")
-
 ### HTML
 
+```html
+<div class="aa-callout">
+    <p>
+      This is a callout-box.
+    </p>
+</div>
+```
+
+![Alliance Auth Framework: Callout Boxes](/_static/images/development/aa-framework/css/callout-box.png "Alliance Auth Framework: Callout Boxe")
+
+#### Alert Level Modifier Classes
+
+The callout boxes come in four alert levels: success, info, warning and danger.
+
+Use the modifier classes `.aa-callout-success`, `.aa-callout-info`, `.aa-callout-warning` and `.aa-callout-danger` to change the left border color of the callout box.
+
 ```html
 <div class="aa-callout aa-callout-success">
     <p>
@@ -71,3 +85,35 @@ Bootstrap alert levels "Success", "Info", "Warning" and "Danger".
     </p>
 </div>
 ```
+
+![Alliance Auth Framework: Callout Boxes Alert Modifier](/_static/images/development/aa-framework/css/callout-boxes-alert-modifier.png "Alliance Auth Framework: Callout Boxes Alert Modifier")
+
+#### Size Modifier Classes
+
+The callout boxes come in three sizes: small, default and large.
+
+Use the modifier classes `.aa-callout-sm` for small and `.aa-callout-lg` for large, where `.aa-callout-sm` will change the default padding form 1rem to 0.5rem and `.aa-callout-lg` will change it to 1.5rem.
+
+These modifier classes can be combined with the alert level modifier classes.
+
+```html
+<div class="aa-callout aa-callout-sm">
+    <p>
+        This is a small callout-box.
+    </p>
+</div>
+
+<div class="aa-callout aa-callout-warning">
+    <p>
+        This is a default callout-box.
+    </p>
+</div>
+
+<div class="aa-callout aa-callout-lg">
+    <p>
+        This is a large callout-box.
+    </p>
+</div>
+```
+
+![Alliance Auth Framework: Callout Boxes Size Modifier](/_static/images/development/aa-framework/css/callout-boxes-size-modifier.png "Alliance Auth Framework: Callout Boxes Size Modifier")