docs: add info on how to create callouts (#224)

Author: henrikvilhelmberglund

docs/tutorialkit.dev/src/content/docs/reference/theming.mdx

@@ -83,6 +83,16 @@ For instanceof, here's an example of an info callout.
 
 ![Content](./images/theming-callout.png)
 
+Callouts are created like this:
+
+```
+:::tip
+This is a tip
+:::
+```
+
+Valid callout names are `tip`, `info`, `warn` and `danger`.
+
 #### Tip
 
 | Token                                            | Description                                                 |