Normal

Dette er en <Lenke href="#">tekstlenke</Lenke> i en setning.
 Kopiert! 

På farget bakgrunn

På en bakgrunn der @navBla ikke har tilstrekkelig kontrast (minimum 4.5:1) anbefaler vi å bruke @navMorkGra.

<Alertstripe type="suksess">
  Dette er en <Lenke href="#">tekstlenke</Lenke> på farget bakgrunn.
</Alertstripe>
 Kopiert! 

Med ikon

const FileIcon = () => (<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M20.5,24h-17C3.2,24,3,23.8,3,23.5v-23C3,0.2,3.2,0,3.5,0h11c0,0,0,0,0,0c0.1,0,0.3,0.1,0.4,0.1l6,6 C20.9,6.2,21,6.4,21,6.5c0,0,0,0,0,0v17C21,23.8,20.8,24,20.5,24z M4,23h16V7h-5.5C14.2,7,14,6.8,14,6.5V1H4V23z M15,6h4.3L15,1.7 V6z"/></g></svg>);

<Lenke href="#"><span>Lenke med ikon</span><FileIcon /></Lenke>
<Lenke href="#"><FileIcon /><span>Lenke med ikon</span></Lenke>
 Kopiert! 

Skalering

Ikoner inne i lenker vil skalere med tekst-størrelsen:

const FileIcon = () => (<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M20.5,24h-17C3.2,24,3,23.8,3,23.5v-23C3,0.2,3.2,0,3.5,0h11c0,0,0,0,0,0c0.1,0,0.3,0.1,0.4,0.1l6,6 C20.9,6.2,21,6.4,21,6.5c0,0,0,0,0,0v17C21,23.8,20.8,24,20.5,24z M4,23h16V7h-5.5C14.2,7,14,6.8,14,6.5V1H4V23z M15,6h4.3L15,1.7 V6z"/></g></svg>);

<Innholdstittel><Lenke href="#"><span>ikonet skaleres</span><FileIcon /></Lenke></Innholdstittel>
<Innholdstittel><Lenke href="#"><FileIcon /><span>ikonet skaleres</span></Lenke></Innholdstittel>
 Kopiert! 

I tekst-blokker

Ikoner skal også fungere fint på lenker midt inne i større tekst-blokker:

Morbi blandit mauris lacus, eget tincidunt velit fringilla in. Sed sodales placerat leo pretium iaculis. Sed lacinia dolor ac consequat blandit. Pellentesque tempor in magna a viverra. Etiam mollis orci et ligula euismod, id dictum elit vehicula. Morbi augue erat, dapibus eu lorem eu, viverra malesuada odio. <Lenke href="#"><FileIcon /><span>Cras finibus odio ac venenatis interdum. Mauris ac accumsan libero. In ac libero tincidunt, ultrices risus at, posuere velit. Pellentesque et mollis ipsum.</span></Lenke> Aliquam porttitor sed justo fermentum pretium. Praesent at tortor ut ex cursus volutpat ac quis eros. Proin laoreet egestas dui, ac condimentum orci lobortis vitae. Etiam semper aliquam magna, ac consectetur elit laoreet non. Pellentesque vel interdum mauris.
 Kopiert!