Länkar
Du använder länkar när du vill hjälpa användaren att komma till en annan sida, fil eller dokument.
Design och språk
När du ska använda länkar
Du använder länkar när du vill hjälpa användaren att komma till en annan sida, fil eller dokument.
Text på länken
- På en webbplats ska du skriva länktexten enligt informationen som finns på sidan Skriva för webbplatser.
- Länkttexten i ett internt system kan vara kort men det ska gå att förstå utifrån sitt sammanhang vart länken leder.
Komponent och kod
Komponenten driftsattes första gången i version 1.0.0.
Prestanda
Något att tänka på om ni använder webbkomponent varianten av länkar är att det kan få negativ påverkan om man använder mycket länkar. Eftersom webbkomponenten kommer köra lite javascript för varje länk. Om ni använder mycket länkar är det oftast bättre att ange länkar med HTML kod.
Länk till intern sida
<a class="c-link" href="#"><span>Byxfjärmat föl gick på duvshowen</span></a><jv-link theme="light">
<a href="#"><span>Byxfjärmat föl gick på duvshowen</span></a></jv-link>Länk till extern sida
<a class="c-link c-link--icon-right" href="http://www.jordbruksverket.se">
<span>Jordbruksverket.se</span><span class="sjv-i-extern-lank c-link__icon--right" aria-hidden="true"></span></a><jv-link theme="light">
<a href="http://www.google.com"><span>google.com</span><span class="sjv-i-extern-lank c-link__icon--right" alt="Externlänk ikon"></span></a></jv-link>Länk till en fil eller dokument
En länk till en fil eller dokument ska ha en ikon till vänster om länken. Välj den ikon som motsvarar formatet. Skriv också hur stor filen eller dokumentet är, så att användaren kan avgöra om den vill ladda ner eller inte.
<a href="/img/logo2.png" download class="c-link"><span class="sjv-i-fil c-link__icon" alt="Externlänk ikon"></span><span>Jordbruksverkets logga <i>(png - 32.8kb)</i></span></a><jv-link theme="light">
<a href="/img/logo2.png" download><span class="sjv-i-fil c-link__icon" alt="Externlänk ikon"></span><span>Jordbruksverkets logga <i>(png - 32.8kb)</i></span></a></jv-link>Länk på mörk bakgrund
<a href="#" class="c-link c-link--dark"><span>Byxfjärmat föl gick på duvshowen</span></a><jv-link theme="dark">
<a href="#"><span>Byxfjärmat föl gick på duvshowen</span></a></jv-link>Senast publicerad
Sidansvarig för sidan är Styleguide