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

HTML
<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

HTML
<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

HTML
<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

HTML
<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
HTML
<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
HTML
<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
HTML
<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