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.
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.
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.
Modulen har marginaler på sidorna.
Content
<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>
Modulen täcker hela sidans bredd.
Content
<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>
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.
Content A
Content B
Content C
<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>
Content A
Content A has a child
Content B is a longer text
Content C
<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>
Content A
Content A has a child
Content B is a longer text
Content C
<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>
Content A
Content A has a child
Content B is a longer text
Content C
Content D
Content E
<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>
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.
Content 1
Content N
<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>
Content N
Content 1
<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>
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.
Content B
Content A
<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>
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
<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
<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
<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>
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
<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
<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>
Modulen centrerar innehållet och begränsar bredden till 80 tecken. Det är den bredd som rekommenderas utifrån tillgänglighet.
Content
<div class="l-col-center">
<div class="content-style_exempel">
<p class="e-p">Content</p>
</div>
</div>
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.
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
<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
<!--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
<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>
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
<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>
Klass | Beskrivning |
---|---|
l-gap-lg | Large mellanrum |
l-gap-md | Medium mellanrum |
l-gap-sm | Small mellanrum |
l-same-height | Inline sammahöjd |
l-justify-right | Högerjusterad |
l-align-center | Centerjusterad |
l-nowrap | Nowrap |
l-wrap | Wrap |
l-responsive-mobile | Responsiv mobil |
l-responsive-tablet | Responsiv tablet |
Senast publicerad
Sidansvarig för sidan är Styleguide