Styleguide

Layout

Styleguidens layoutsystem består av flera färdiga moduler som fungerar tillsammans. Det finns moduler för de vanligaste layouterna. Eftersom modulerna passar ihop och behåller mellanrummet mellan sig blir layouten enhetlig och responsiv.

Använda layoutsystemet

Genom att använda layoutsystemet kan du bygga upp innehållet på din sida genom att kombinera olika moduler. Du kan till exempel dela upp utrymmet i ett antal kolumner med hjälp av en gridlayout och sedan kan du använda inlinelayout och innehållslayout för att påverka placeringen av innehållet i respektive kolumn. Du kan kombinera de olika moduler så att de placeras bredvid, under, över eller i varandra.

Layoutsystemet driftsattes första gången i version 18.0.31.

Välj container för att bestämma bredden

Containern bestämmer den maximala bredden på innehållet och ser till att avståndet är konsekvent mellan det övriga innehållet som du placerar i containern.

Container

Modulen har marginaler på sidorna.

Content

HTML

<div class="l-container">
  <div class="l-container__inner">
    <!-- Innehållet i container  -->
    <div class="content-style_exempel">
       <p class="e-p">Content</p>
     </div>
  </div>
</div>

Fullbreddscontainer

Modulen täcker hela sidans bredd.

Content

HTML

<div class="l-container-fluid">
  <div class="l-container__inner">
    <!-- Innehållet i container  -->
     <div class="content-style_exempel">
        <p class="e-p">Content</p>
    </div>
  </div>
</div>

Gridlayout

Du kan dela upp utrymmet i en container i flera kolumner. Du kan också lägga flera rader med kolumner under varandra så att du delar upp utrymmet i ett tvådimensionellt rutnät. Den vänstra kolumnen ligger alltid i linje men containerns vänstermarginal och den högra kolumnen ligger alltid i linje med containerns högermarginal. Bredden på på varje kolumn beror på hur många kolumner du väljer. Alla kolumner är lika breda och avståndet mellan varje kolumn är lika stort.

Antalet kolumner som visar på användarens skärm beror på brytpunkten.

En kolumn

Content A

Content B

Content C

HTML

<div class="l-grid">
  <!-- Innehållet i grid -->
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
      <p class="e-p">Content B</p>
   </div>
   <div class="content-style_exempel">
     <p class="e-p">Content C</p>
   </div>
</div>

Två kolumner

Content A

Content A has a child

Content B is a longer text

Content C

HTML

<div class="l-grid-col-2 l-responsive-mobile">
   <!-- Innehållet i grid med 2 kolumner  -->
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
      <p class="e-p">Content A has a child</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content B is a longer text</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content C</p>
   </div>
</div>

Tre kolumner

Content A

Content A has a child

Content B is a longer text

Content C

HTML

<div class="l-grid-col-3 l-responsive-tablet l-responsive-mobile">
   <!-- Innehållet i grid med 3 kloumner  -->
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
      <p class="e-p">Content A has a child</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content B is a longer text</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content C</p>
   </div>
</div>

Fyra kolumner

Content A

Content A has a child

Content B is a longer text

Content C

Content D

Content E

HTML

<div class="l-grid-col-4 l-responsive-tablet l-responsive-mobile">
   <!-- Innehållet i grid med 4 kolumner  -->
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
      <p class="e-p">Content A has a child</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content B is a longer text</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content C</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content D</p>
   </div>
     <div class="content-style_exempel">
      <p class="e-p">Content E</p>
   </div>
</div>

Sidfält

Modulen sidfält delar upp utrymmet i två delar där den mindre delens bredd är fast medan den stora delen upptar det återstående utrymmet.

Sidfält vänster

Content 1

Content N

HTML

<div class="l-col-1-n l-gap-lg l-responsive-mobile">
   <div class="content-style_exempel">
      <p class="e-p">Content 1</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content N</p>
   </div>
</div>

Sidfält höger

Content N

Content 1

HTML

<div class="l-col-n-1 l-gap-lg l-responsive-mobile">
   <div class="content-style_exempel">
      <p class="e-p">Content N</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content 1</p>
   </div>
</div>

Media

Modulen media används när olika typer av innehåll som hör ihop behöver placeras tillsammans. Det kan till exempel vara en bild och bildtext eller rubrik, text och film.

Jordbruksverkets logo

Content B

Content A

Jordbruksverkets logo

HTML

<div class="l-col-1-n l-responsive-mobile">
   <div class="content-style_exempel">
      <p class="e-p"><img alt="Jordbruksverkets logo" role="presentation" class="c-header__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/18.1.5/package/dist/release/assets/img/jordbruksverket-logotype.svg"></p>
   </div>
   
  <div class="content-style_exempel">
    <p class="e-p">Content B</p>
  </div>
</div>

<!-- Höger variant --> 
</br>
</br>

<div class="l-col-n-1 l-responsive-mobile">
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p"><img alt="Jordbruksverkets logo" role="presentation" class="c-header__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/18.1.5/package/dist/release/assets/img/jordbruksverket-logotype.svg"></p>
   </div>
</div>

Ikon

Modulen ikon används för att kombinera en text med en ikon. Därför är avståndet mellan de två delarna litet. Det går inte heller att stapla innehåll vertikalt.

Content

HTML

<div class="l-col-1-n l-gap-sm l-nowrap">
  <div class="content-style_exempel">
     <p class="e-p"><span class="sjv-i-plus"></span></p>
  </div>
  <div class="content-style_exempel">
     <p class="e-p">Content</p>
  </div>
</div>

Content

HTML

<div class="l-col-n-1 l-gap-sm l-nowrap">
  <div class="content-style_exempel">
     <p class="e-p">Content</p>
  </div>
  <div class="content-style_exempel">
     <p class="e-p"><span class="sjv-i-extern-lank"></span></p>
  </div>
</div>

Content

HTML

<div class="l-col-1-n l-gap-sm l-nowrap">
   <div class="content-style_exempel">
      <p class="e-p"><span class="sjv-i-plus"></span></p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p"><span class="sjv-i-extern-lank"></span></p>
   </div>
</div>

Viktad layout

Modulen delar in utrymmet i två delar, där en del består av en tredjedel av utrymmet och en del består av två tredjedelar av utrymmet.

Content A

Content B

HTML

<div class="l-col-1-2 l-responsive-mobile">
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content B</p>
   </div>
</div>

Content A

Content B

HTML

<div class="l-col-2-1 l-responsive-mobile">
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content B</p>
   </div>
</div>

Centrerad

Modulen centrerar innehållet och begränsar bredden till 80 tecken. Det är den bredd som rekommenderas utifrån tillgänglighet.

Content

HTML

<div class="l-col-center">
   <div class="content-style_exempel">
      <p class="e-p">Content</p>
   </div>
</div>

Inlinelayout

Inlinelayout delar in utrymmet i olika stora delar. Modulen är dynamisk och låter bredden på modulen påverkas av delarnas bredd på det innehåll du placerar i modulen.

Horisontellt

Modulen placerar alla delar i utrymmet horisontellt, det vill säga bredvid varandra. Avståndet mellan alla delar är konsekvent.

Content A

Content B

Extra long Content C with extra texts and takes up extra space

Content D

HTML

<div class="l-col-vertical l-responsive-mobile">
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content B</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Extra long Content C with extra texts and takes up extra space </p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content D</p>
   </div>
</div>

Content A

Content B

Extra long Content C with extra texts and takes up extra space

HTML

<!--Vertikal layout med hjälpklass l-wrap-->
<div class="l-col-vertical l-wrap">
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content B</p>
   </div>
      <div class="content-style_exempel">
      <p class="e-p">Extra long Content C with extra texts and takes up extra space</p>
   </div>
</div>

Content A

Extra long Content B with extra texts and takes up extra space

HTML

<div class="l-col-vertical">
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Extra long Content B with extra texts and takes up extra space</p>
   </div>
</div>

Vertikalt

Modulen placerar alla delar i utrymmet vertikalt, det vill säga ovanpå varandra. Avståndet mellan alla delar är konsekvent.

Content A

Content B

Extra long Content C with extra texts and takes up extra space

Content D

HTML

<div class="l-col-horizontal l-responsive-mobile">
   <div class="content-style_exempel">
      <p class="e-p">Content A</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content B</p>
   </div>
      <div class="content-style_exempel">
      <p class="e-p">Extra long Content C with extra texts and takes up extra space</p>
   </div>
   <div class="content-style_exempel">
      <p class="e-p">Content D</p>
   </div>
</div>

Översikt layout

Översikt
Namn	Klasser	Funktion	Hjälpklasser
Container	l-container > l-container__inner	l-container definerar en sidsektion. Sektionens innehåll ska placeras i l-container--inner.	Margin-klasserna l-container--mt och l-container--mb för att få standardmarginal.
Fullbreddscontainer	l-container-fluid > l-container__inner	En container som tar hela bredden utan marginaler.	Samma hjälpklasser som container.
Gridlayout	l-grid l-grid-col-2 l-grid-col-3 l-grid-col-4	Definerar en gridlayout. Exempel: l-grid-col-2 betyder en grid med två kolumner.	l-responsive-tablet , l-responsive-mobil definerar hur många kolumner det blir på tablet och mobila enheter.
Viktad gridlayout	l-col-1-2 l-col-2-1	Definerar en viktad gridlayout där en kolumn är dubbelt så stor som den andra.	Samma hjälpklasser som gridlayout.
Inlinelayout	l-col	Definerar en inline layout	l-same-height l-justify-right l-align-center l-nowrap l-wrap l-gap-lg (1.5rem) l-gap-md (1rem) l-gap-sm(0.375rem) l-responsive-mobil
Media	l-col-1-n l-col-n-1	Mall för en layout med ett mediaobjekt t.ex. foto, grafik.	Samma hjälpklasser som inlinelayout.
Sidpanel	l-col-1-n l-gap-lg l-col-n-1 l-gap-lg	Mall för en layout med sidpanel.	Samma hjälpklasser som inlinelayout.
Ikon	l-col-1-n l-gap-sm l-col-n-1 l-gap-sm	Mall för en layout med ikon.	Samma hjälpklasser som inlinelayout.
Centerjusterad innehållslayout	l-col-center	Definerar en centerjusterad innehållslayout.	Samma hjälpklasser som inlinelayout.
Vertikal innehållslayout	l-col-vertical	Definerar en vertikal innehållslayout.	Samma hjälpklasser som inlinelayout.
Horisontell innehållslayout	l-col-horizontal	Definerar en horisontell innehållslayout.	Samma hjälp klasser som inlinelayout.

Senast publicerad 2022-11-02

Sidansvarig för sidan är Styleguide