diff --git a/packages/common/README.md b/packages/common/README.md
index 2839960760ca438355a0d3d1821e8349be71f25c..31d5fad02af3f77f2fd7e1f2c4b1b842c08c7d06 100644
--- a/packages/common/README.md
+++ b/packages/common/README.md
@@ -37,7 +37,58 @@ You can use this web component to show translated html.
 </dbp-translated>
 ```
 
-The English or German text will be shown according to the `lang` attribute. 
+The English or German text will be shown according to the `lang` attribute.
+
+## Translation Web Component
+
+You can use this web component to translate text with i18next.
+The English or German text will be shown according to the subscribed `lang` attribute.
+Additionally, this component subscribes the `lang-dir` attribute to retrieve the directory where the i18n translation files are located.
+To get the translation of the key `test`, the component can be used like this:
+```html
+<dbp-translation subscribe="lang, lang-dir" key="test"></dbp-translation>
+```
+The i18next translation files are namespaced with the tag name of the component which requests translations. In this case the tag name is `dbp-translation`.
+Thus, the translation files for english and german will look like this:
+```json
+{
+  "dbp-translation": {
+    "test": "Hallo"
+  }
+}
+```
+```json
+{
+  "dbp-translation": {
+    "test": "Hello"
+  }
+}
+```
+Furthermore, the component allows interpolation and unsafe translations. Thus, HTML can be injected, if the unsafe attribute is set. **Therefore, this feature has to be used with caution!**
+
+To use the component to display a link, interpolation and unsafe can be used like this:
+```html
+<dbp-translation subscribe="lang, lang-dir" key="link" var='{"linkDE": "https://www.tugraz.at/home/", "linkEN": "https://www.tugraz.at/en/home/"}' unsafe></dbp-translation>
+```
+Where the translation files for english and german will look like this:
+```json
+{
+  "dbp-translation": {
+    "test": "Hallo",
+    "link": "Hier ist ein klickbarer <a class=\"link\" href=\"{{- linkDE}}\">Link</a>"
+  }
+}
+```
+```json
+{
+  "dbp-translation": {
+    "test": "Hello",
+    "link": "Here is a clickable <a class=\"link\" href=\"{{- linkEN}}\">link</a>"
+  }
+}
+```
+
+The resulting translations can be seen in the section Translation Demo further down the page.
 
 ## Overriding slots in nested web components
 
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index f9e6ac69f43615471c7a23b7cafc8dd91ab12d83..8417ea0da4ec537c0856fc92f10adf3e73b3889d 100644
--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -303,12 +303,19 @@ html {
                             </div>
                         </dbp-translated>
                     </div>
-                    <div class="control" id="dbp-translation-demo">
+                    <div class="control" id="dbp-translation-text">
                         <dbp-translation key="toolkit-showcase" subscribe="lang, lang-dir"></dbp-translation>
                         <dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-dir" unsafe></dbp-translation>
                         <dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation>
                     </div>
                 </div>
+                <div class="content">
+                    <h2>Translation Demo</h2>
+                    <div class="control" id="dbp-translation-demo">
+                        <dbp-translation subscribe="lang, lang-dir" key="test"></dbp-translation><br/>
+                        <dbp-translation subscribe="lang, lang-dir" key="link" var='{"linkDE": "https://www.tugraz.at/home/", "linkEN": "https://www.tugraz.at/en/home/"}' unsafe></dbp-translation>
+                    </div>
+                </div>
             </section>
         `;
     }
diff --git a/toolkit-showcase/assets/translation-overrides/de/translation.json b/toolkit-showcase/assets/translation-overrides/de/translation.json
index 727ad0917125599979ba52abe115d2a26d47cb04..d32411f821d8fcc36e0694324d5b46449cd9a381 100644
--- a/toolkit-showcase/assets/translation-overrides/de/translation.json
+++ b/toolkit-showcase/assets/translation-overrides/de/translation.json
@@ -3,7 +3,9 @@
       "toolkit-showcase": "Dieser Text wird mithilfe von i18n aus einer benutzerdefinierten Sprachdatei gelesen und ins Englische übersetzt wenn man die Sprache auf Englisch stellt.",
       "toolkit-showcase-link": "Es können sogar links mittels <a href=\"{{- link1}}\" class=\"link\">interpolation</a> und escaping dargestellt werden.",
       "color-mode": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden.",
-      "intro": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden."
+      "intro": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden.",
+      "link": "Hier ist ein klickbarer <a class=\"link\" href=\"{{- linkDE}}\">Link</a>",
+      "test": "Hallo"
     },
     "dbp-theme-switcher": {
       "color-mode": "Theme ändern",
diff --git a/toolkit-showcase/assets/translation-overrides/en/translation.json b/toolkit-showcase/assets/translation-overrides/en/translation.json
index ac573073ec811343ac82a3b95a195e084a5bcc04..7c9f1a94cdd7c70ad8fcf961760a47c71a9bd014 100644
--- a/toolkit-showcase/assets/translation-overrides/en/translation.json
+++ b/toolkit-showcase/assets/translation-overrides/en/translation.json
@@ -3,7 +3,9 @@
       "toolkit-showcase": "This text will be translated to german using i18n with a user defined language file when the language is changed to german.",
       "toolkit-showcase-link": "Furthermore its possible to display links through <a href=\"{{- link1}}\" class=\"link\">interpolation</a> and escaping.",
       "color-mode": "This text is not supposed to be displayed. It is only here for testing.",
-      "intro": "This text is not supposed to be displayed. It is only here for testing."
+      "intro": "This text is not supposed to be displayed. It is only here for testing.",
+      "link": "Here is a clickable <a class=\"link\" href=\"{{- linkEN}}\">link</a>",
+      "test": "Hello"
     },
     "dbp-theme-switcher": {
       "color-mode": "Change theme",