1 files changed, 54 insertions, 24 deletions
diff --git a/exampleSite/content/docs/introduction/examples/shortcodes.md b/exampleSite/content/docs/introduction/examples/shortcodes.md
index bbcc81c..c2f115a 100644
--- a/exampleSite/content/docs/introduction/examples/shortcodes.md
+++ b/exampleSite/content/docs/introduction/examples/shortcodes.md
@@ -4,38 +4,34 @@ weight: 3
 
 # Shortcodes
 
-## Expand shortcode
-
-### Default
+## Hints
 
+Hint shortcode can be used as hint/alerts/notification block. There are 3 colors to choose: `info`, `warning` and `danger`.
 ```tpl
-{{</* expand */>}}
-## Markdown content
-Lorem markdownum insigne...
-{{</* /expand */>}}
+{{</* hint [info|warning|danger] */>}}
+**Markdown content**  
+Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+{{</* /hint */>}}
 ```
 
-{{< expand >}}
-## Markdown content
-Lorem markdownum insigne...
-{{< /expand >}}
-
-### With Custom Label
+{{< hint info >}}
+**Markdown content**  
+Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+{{< /hint >}}
 
-```tpl
-{{</* expand "Custom Label" "..." */>}}
-## Markdown content
-Lorem markdownum insigne...
-{{</* /expand */>}}
-```
+{{< hint warning >}}
+**Markdown content**  
+Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+{{< /hint >}}
 
-{{< expand "Custom Label" "..." >}}
-## Markdown content
+{{< hint danger >}}
+**Markdown content**  
 Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
-Miseratus fonte Ditis conubia.
-{{< /expand >}}
+{{< /hint >}}
 
 ## Buttons
 
@@ -135,6 +131,40 @@ protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
 Miseratus fonte Ditis conubia.
 {{< /columns >}}
 
+## Expand shortcode
+
+Expand shortcode can help to decrease clutter on screen by hiding part of text
+
+### Default
+
+```tpl
+{{</* expand */>}}
+## Markdown content
+Lorem markdownum insigne...
+{{</* /expand */>}}
+```
+
+{{< expand >}}
+## Markdown content
+Lorem markdownum insigne...
+{{< /expand >}}
+
+### With Custom Label
+
+```tpl
+{{</* expand "Custom Label" "..." */>}}
+## Markdown content
+Lorem markdownum insigne...
+{{</* /expand */>}}
+```
+
+{{< expand "Custom Label" "..." >}}
+## Markdown content
+Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
+Miseratus fonte Ditis conubia.
+{{< /expand >}}
 
 ## Mermaid Chart