Demos#
Basic usage#
The basic use of <Anchor> is identical to the <a> tag.
This is a regular paragraph with a link to a website in the middle of some text.
<P> This is a regular paragraph with a{' '} <Anchor href="https://dnb.no/">link to a website</Anchor> in the middle of some text. </P>
With icon#
Icons can be added with the icon and iconPosition properties. Normally by sending in the name if an icon, but it is also possible to send in html/react code (normally for custom svg).
On dark surface#
Use Section or Theme.Context with surface="dark" to provide dark surface context to supporting components.
Additional Anchor helper classes#
To force a specific state of style, use the following classes to do so:
Anchor modifier properties#
| Property | Example |
|---|---|
noAnimation | No Animation |
noStyle | No Style |
noHover | No Hover |
noUnderline | No Underline |
Links in running text need the underline, so they can be told apart from the surrounding text without relying on color. Use noUnderline only for links that stand on their own, such as in navigation.
Anchor with target="_blank"#
If the link opens a new window it will automatically get an icon to indicate this.
Unless the href starts with mailto:, tel: or sms:.
Anchor in headings#
Anchor in Section#
<Section innerSpace={{ block: 'large', }} > <Anchor className="dnb-anchor--no-underline" href="https://dnb.no/"> Anchor in Section without underline </Anchor> </Section>