#Anchor (Text Link)

#Demos

#Basic usage

The basic use of <Anchor> is identical to the <a> tag.

<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 props. Normally by sending in the name if an icon, but it is also possible to send in html/react code (normally for custom svg).

#Additional Anchor helper classes

To force a specific state of style, use the following classes to do so:

#Anchor modifiers

• .dnb-anchor--no-animation No Animation
• .dnb-anchor--no-style No Style
• .dnb-anchor--no-hover No Hover
• .dnb-anchor--no-underline No Underline

#Anchor with target="_blank"

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

<Section spacing>
  <Anchor className="dnb-anchor--no-underline" href="https://dnb.no/">
    Anchor in Section without underline
  </Anchor>
</Section>