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.
Code Editor
<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).
A text paragraph with an anchor with icon in it.
Additional Anchor helper classes
To force a specific state of style, use the following classes to do so:
Anchor modifier properties
noAnimation
- No AnimationnoStyle
- No StylenoHover
- No HovernoUnderline
- No Underline
target="_blank"
Anchor with If the link opens a new window it will automatically get an icon to indicate this.
Unless the href contains :mailto
, :tel
or :sms
.
Anchor in headings
Anchor in Section
Code Editor
<Section spacing> <Anchor className="dnb-anchor--no-underline" href="https://dnb.no/"> Anchor in Section without underline </Anchor> </Section>