Lenke

Normal

Tekstlenker skal ha tekstfarge @navBla (#0067C5) med normal underlinje som forsvinner ved hover. Ved fokus skal lenken få hvit tekstfarge uten underlinje og bakgrunnsfarge @fokusFarge (#254B6D).

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

Kopiert!

Med ikon

info
Når du bruker ikoner er det viktig at du pakker inn teksten med <span>-elementer for å påse riktig avstand til ikonet.
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. Cras finibus odio ac venenatis interdum. Mauris ac accumsan libero. In ac libero tincidunt, ultrices risus at, posuere velit. Pellentesque et mollis ipsum. 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.
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!