Skip to content
Home

Anchor (Text Link)

Info
Demos
Properties

Demos

Anchor states

<ul className="dnb-ul dnb-unstyled-list">

  <li>

    <Anchor

      href="/uilib/components/anchor"

    >

      Default Style

    </Anchor>

  </li>

  <li>

    <Anchor

      href="/uilib/components/anchor"

      className="dnb-anchor--hover"

    >

      Hover Style

    </Anchor>

  </li>

  <li>

    <Anchor

      href="/uilib/components/anchor"

      className="dnb-anchor--active"

    >

      Active Style

    </Anchor>

  </li>

  <li>

    <Anchor

      href="/uilib/components/anchor"

      className="dnb-anchor--focus"

    >

      Focus Style

    </Anchor>

  </li>

</ul>

Additional Anchor helper classes

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

Anchor modifiers

Anchor with icons

Anchor with target="_blank"

If the link opens a new window it will automatically get an icon to indicate this.

Anchor in headings

Inside Headings H2

Blank target in headings H2

Anchor in Section

Anchor in Section without underline
<Section spacing style_type="emerald-green">

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

    Anchor in Section without underline

  </Anchor>

</Section>