Komponenter och kod har flyttat så det kan det vara lite stökigt här nu!

I april 2025 driftsattes en ny version av komponentbiblioteket som matchar Jordbruksverkets nya grafiska profil. Samtidigt har vi flyttat till en ny plattform, Storybook, där du hämtar kod till komponenterna. Där hittar du även layoutsystemet, färger, ikoner och typografi. Styleguide i Storybook - v22.1.17

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.

Skriva för webbplatser

Komponent och kod

Komponenten driftsattes första gången i version 1.0.0.

Länk till intern sida 

HTML Webbkomponent
<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

HTML Webbkomponent
<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.

HTML Webbkomponent
<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

HTML Webbkomponent
<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