Styleguide
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

Gå till komponentbiblioteket

Justering

Justeringsklasserna används för att justera innehållet horisontellt eller vertikalt.

Om justering

Justeringsklasserna har sina egna responsiva klasser. Till exempel betyder l-align—middle md:l-align—center lg:l-align—top att:

  • l-align—middle är standard
  • md:l-align--center är för surfplattor och uppåt
  • lg:l-align--top är för stationära skärmar och uppåt

Vertikal justering

Top Middle Bottom Baseline Stretch
A
A
A
A
A
HTML 
<div class="l-flex exempel-heading">
   <strong style="width: 100px;">Top</strong>
   <strong style="width: 100px;">Middle</strong>
   <strong style="width: 100px;">Bottom</strong>
   <strong style="width: 100px;">Baseline</strong>
   <strong style="width: 100px;">Stretch</strong>
</div>
<div class="l-flex-inline">
  <div class="l-align-top example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-middle example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-bottom example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-baseline example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-stretch example2" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: auto;">A</div>
  </div>
</div>

Vertikal justering för enstaka element

Top Bottom Middle Baseline Stretch
A
A
A
A
A
HTML 
<div class="l-flex exempel-heading">
   <strong style="width: 100px;">Top</strong>
   <strong style="width: 100px;">Bottom</strong>
   <strong style="width: 100px;">Middle</strong>
   <strong style="width: 100px;">Baseline</strong>
   <strong style="width: 100px;">Stretch</strong>
</div>
<div class="l-flex-inline">
  <div class="example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="l-align-self-top a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="l-align-self-bottom a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="l-align-self-middle a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="l-align-self-baseline a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="example2" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="l-align-self-stretch a pl-050" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
</div>

Horisontell justering

Left Right Center Space-between Space-around Space-evenly
A
A
A
A
B
A
B
A
B
HTML 
<div class="l-flex exempel-heading">
   <strong style="width: 100px;">Left</strong>
   <strong style="width: 100px;">Right</strong>
   <strong style="width: 100px;">Center</strong>
   <strong style="width: 100px;">Space-between</strong>
   <strong style="width: 100px;">Space-around</strong>
   <strong style="width: 100px;">Space-evenly</strong>
</div>
<div class="l-flex">
  <div class="l-align-left example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-right example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-center example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-space-between example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
    <div class="b" style=" background-color: #b8e1fc;text-align: center;border: 1px black dashed; width: 30px; height: 30px;">B</div>
  </div>
  <div class="l-align-space-around example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
    <div class="b" style=" background-color: #b8e1fc;text-align: center;border: 1px black dashed; width: 30px; height: 30px;">B</div>
  </div>
  <div class="l-align-space-evenly example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
    <div class="b" style=" background-color: #b8e1fc;text-align: center;border: 1px black dashed; width: 30px; height: 30px;">B</div>
  </div>
</div>

Horisontell justering för enstaka element

Left Right Center Stretch
A
A
A
A
HTML 
<div class="l-flex exempel-heading">
   <strong style="width: 100px;">Left</strong>
   <strong style="width: 100px;">Right</strong>
   <strong style="width: 100px;">Center</strong>
   <strong style="width: 100px;">Stretch</strong>
</div>
<div class="l-flex">
  <div class="example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="l-align-self-left a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="l-align-self-right a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
   <div class="example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="l-align-self-center a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <!--Only flexbox-->
  <div class="example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="l-align-self-stretch a pl-050" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
</div>

Översikt av justeringsklasserna

Justeringsklasserna

Klass

Beskrivning

l-align-top

Anpassar innehållet vertikalt till behållarens början

l-align-middle

Centrerar innehållet vertikalt

l-align-bottom

Anpassar innehållet vertikalt till behållarens slut

l-align-stretch

Justerar innehållet vertikalt för att sträcka sig över allt tillgängligt utrymme

l-align-baseline

Anpassar innehållet vertikalt till behållarens baseline

l-align-self-top

Anpassar sig vertikalt till behållarens början

l-align-self-bottom

Anpassar sig vertikalt till behållarens slut

l-align-self-middle

Centrerar sig vertikalt

l-align-self-stretch

Justerar sig vertikalt så att det sträcker sig över allt tillgängligt utrymme

l-align-left

Anpassar innehållet horisontellt till behållarens början

l-align-right

Anpassar innehållet horisontellt till behållarens slut

l-align-center

Centrerar innehållet horisontellt

l-align-space-between

Justerar innehållet horisontellt så att tomrummet fördelas mellan innehållet

l-align-space-around

Justerar innehållet horisontellt så att tomrummet fördelas runt innehållet

l-align-space-evenly

Anpassar innehållet horisontellt så att tomrummet fördelas jämnt

l-align-self-left

Anpassar sig horisontellt till behållarens vänstersida

l-align-self-right

Anpassar sig horisontellt till behållarens högersida

l-align-self-center

Centrerar sig horisontellt

l-align-self-stretch

Justerar sig horisontellt för att sträcka sig över allt tillgängligt tomrum. Gäller endast flexbox.

l-max-width-080

Sätter maxbredd på alla underordande element till 80 tecken

Senast publicerad

Sidansvarig för sidan är Styleguide