Add documentation

exampleSite/content/docs/shortcodes/index.md

@@ -375,6 +375,38 @@ Inline notation can be generated by wrapping the expression in `\\(` and `\\)` d
 
 Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples.
 
+<br/><br/><br/>
+
+
+## Keyword
+
+
+The `keyword` creates a visually distinguished keyword that can be used in different use-cases, e.g. professional skills etc. The `keyword` shortcode relies on the `keywordList` shortcode to group together keywords. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                  |
+| ----------- | -------------------------------------------- |
+| `icon`      | the icon to be used in the keyword           |
+<!-- prettier-ignore-end -->
+
+The input is written in Markdown so you can format it however you please.
+
+**Example:**
+
+```md
+{{</* keywordList */>}}
+{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
+{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}}
+{{</* /keywordList */>}}
+```
+
+{{< keywordList >}}
+{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}}
+{{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
+{{< /keywordList >}}
+
+
 <br/><br/><br/>
 
 ## Lead