Exempel på layout
Här hittar du mönster du kan använda för en responsiv layout.
Sidpanel layout
Sidpanel vänsterjusterad
Innehåll 1
Innehåll N
<div class="l-flex-1-n l-gap-110">
<div class="content-style_exempel">
<p>Innehåll 1</p>
</div>
<div class="content-style_exempel">
<p>Innehåll N</p>
</div>
</div>Sidpanel högerjusterad
Innehåll N
Innehåll 1
<div class="l-flex-n-1 l-gap-110">
<div class="content-style_exempel">
<p>Innehåll N</p>
</div>
<div class="content-style_exempel">
<p>Innehåll 1</p>
</div>
</div>Media layout
Media vänsterjusterad
Innehåll B
<div class="l-flex-1-n">
<div class="content-style_exempel">
<p><img alt="Jordbruksverkets logo" class="c-header__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/19.0.53/package/dist/release/assets/img/jordbruksverket-logotype.svg"></p>
</div>
<div class="content-style_exempel">
<p>Innehåll B</p>
</div>
</div>Media högerjusterad
Innehåll A
<div class="l-flex-n-1">
<div class="content-style_exempel">
<p>Innehåll A</p>
</div>
<div class="content-style_exempel">
<p><img alt="Jordbruksverkets logo" class="c-header__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/19.0.53/package/dist/release/assets/img/jordbruksverket-logotype.svg"></p>
</div>
</div>Ikon layout
Ikonen är placerad till vänster
Content
<div class="l-flex-inline l-gap-060 l-align--middle content-style_icon-exempel">
<span class="sjv-i-plus"></span>
<span>Content</span>
</div>Ikonerna är placerade på båda sidor
Content B
<div class="l-flex-inline l-gap-060 l-align--middle content-style_icon-exempel">
<span class="sjv-i-plus"></span>
<span>Content B</span>
<span class="sjv-i-extern-lank"></span>
</div>Ikonen är placerad till höger
Content
<div class="l-flex-inline l-gap-060 l-align--middle content-style_icon-exempel">
<span>Content</span>
<span class="sjv-i-extern-lank"></span>
</div>Senast publicerad
Sidansvarig för sidan är Styleguide