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

Sidfot

Sidfot, det vill säga footer, använder du när det finns behov av att placera fast infomation, som till exempel kontaktuppgifter, längst ner på varje sida.

Design och språk

Sidfotens utseende kan variera beroende på behovet och styleguiden har därför ingen färdig komponent för sidfot. I många system finns det inget behov av en sidfot och då behöver du inte heller lägga till en sidfot.

Innehåll i sidfoten

Det är behovet i varje system som avgör vilken information som ska placeras i en eventuell sidfot. Finns det behov av att informera om kontaktuppgifter är det en typ av information som är lämplig att placera i sidfoten.

Komponent och kod

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

"Val 1" "Val 2"
HTML
<jv-footer  type="extern">
   <section class="c-footer--green__content__section" slot="green-footer">
      <h2 class="c-footer--green__content__section__header">Kontakta oss</h2>
      <div class="c-footer-lankar">
         <a class="c-link c-link--dark" href="tel:0771223223"><span class="sjv-i-telefon" aria-hidden="true"></span><span>0771-223 223</span></a>
         <a class="c-link c-link--dark" href="https://kundo.se/org/jordbruksverket/"><span class="sjv-i-kommentar" aria-hidden="true"></span><span>Ställ en fråga till oss</span></a>
         <a class="c-link c-link--dark" href="https://jordbruksverket.se/kontakta-oss/mejlformular-till-kundtjanst"><span class="sjv-i-e-post" aria-hidden="true"></span><span>Skicka e-post till oss</span></a>
      </div>
   </section>
   <section class="c-footer--green__content__section" slot="green-footer">
      <h2 class="c-footer--green__content__section__header">"Annat innehåll"</h2>
      <p>"Exempel text"</p>
   </section>
   <jv-link theme="dark" slot="dark-footer">
      <a href="#" ><span>"Val 1"</span></a>
   </jv-link>
   <jv-link theme="dark" slot="dark-footer">
      <a href="#" ><span>"Val 2"</span></a>
   </jv-link>
</jv-footer>

Intern

"Val 1" "Val 2"
HTML
<jv-footer type="intern">
   <section class="c-footer--green__content__section" slot="green-footer">
      <h2 class="c-footer--green__content__section__header">"Annat innehåll"</h2>
      <p>"Exempel text"</p>
   </section>
   <jv-link theme="dark" slot="dark-footer">
      <a href="#" ><span>"Val 1"</span></a>
   </jv-link>
   <jv-link theme="dark" slot="dark-footer">
      <a href="#" ><span>"Val 2"</span></a>
   </jv-link>
</jv-footer>

Senast publicerad

Sidansvarig för sidan är Styleguide