docs: update docs about #anchor / link

packages/dnb-design-system-portal/src/pages/uilib/elements/anchor.md

@@ -4,9 +4,14 @@ draft: false
 ---
 
 import CodeBlock from 'Tags/CodeBlock'
+import { IconPrimary } from 'dnb-ui-lib/src'
 
 ## Anchor
 
+The Anchor, also knows as `Link` is used to navigate from one linked content to the next.
+
+You would normally just decorate your anchor class withe this CSS class: `.dnb-anchor`.
+
 <CodeBlock reactLive hideCode>
 {`
 <ul className="dnb-ul dnb-unstyled-list">
@@ -36,6 +41,8 @@ import CodeBlock from 'Tags/CodeBlock'
 
 ### Additional Anchor helper classes
 
+To force a specific state of style, use the following classes to do so:
+
 <CodeBlock reactLive hideCode>
 {`
 <ul className="dnb-ul dnb-unstyled-list">
@@ -73,4 +80,20 @@ import CodeBlock from 'Tags/CodeBlock'
 `}
 </CodeBlock>
 
-Read more about the Anchor [Default Styles](/uilib/typography/anchor#default-styles)
+### With icon
+
+- <a href="/" className="dnb-anchor">Anchor with Icon <IconPrimary icon="chevron_right" /></a>
+- <p>
+    Eros semper blandit tellus mollis primis quisque platea sollicitudin
+    ipsum <a href="/" className="dnb-anchor">Inside a Paragraph <IconPrimary icon="bell" /></a> auctor cursus mauris porta consectetur natoque vehicula vestibulum feugiat ultrices vitae fermentum eros euismod imperdiet eleifend justo vivamus posuere
+  </p>
+- <h2>
+    <a href="/" className="dnb-anchor">Inside Headings <IconPrimary icon="bell" /></a> H2
+  </h2>
+
+### Manipulation
+
+- `.dnb-anchor--no-animation` <a href="/" class="dnb-anchor dnb-anchor--no-animation">No Animation</a>
+- `.dnb-anchor--no-style` <a href="/" class="dnb-anchor dnb-anchor--no-style">No Style</a>
+- `.dnb-anchor--no-hover` <a href="/" class="dnb-anchor dnb-anchor--no-hover">No Hover</a>
+- `.dnb-anchor--no-underline` <a href="/" class="dnb-anchor dnb-anchor--no-underline">No Underline</a>

packages/dnb-design-system-portal/src/pages/uilib/typography.md

@@ -106,4 +106,13 @@ Read more about [best practices for typography](/uilib/usage/best-practices/for-
 `}
 </CodeBlock>
 
-Read more [about Fonts in the Designer Guides](/quickguide-designer/fonts/).
+Read more [about Fonts in the Designer Guides](/quickguide-designer/fonts/)
+
+### Anchor
+
+- `.dnb-anchor` <a href="/" class="dnb-anchor">Anchor with default style</a>
+- `.dnb-anchor--hover` <a href="/" class="dnb-anchor dnb-anchor--hover">Hover Style</a>
+- `.dnb-anchor--active` <a href="/" class="dnb-anchor dnb-anchor--active">Active Style</a>
+- `.dnb-anchor--focus` <a href="/" class="dnb-anchor dnb-anchor--focus">Focus Style</a>
+
+Read more about the [Anchor / Link](/uilib/elements/anchor)