Styleguide

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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll 1</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll N</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll 1</p>
   </div>
</div>

Media layout

Media vänsterjusterad

Jordbruksverkets logo

Innehåll B

HTML

<div class="l-flex-1-n">
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;"><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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B</p>
   </div>
</div>

Media högerjusterad

Innehåll A

Jordbruksverkets logo

HTML

<div class="l-flex-n-1">
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;"><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" style="background-color: transparent;background-image: linear-gradient(135deg,#b3b3b3 10%,transparent 10%,transparent 50%,#b3b3b3 50%,#b3b3b3 60%,transparent 60%,transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
  <span class="sjv-i-plus" style="background-color: #fff; color: #991f14; font-size: 0.8125rem; padding: 0.25rem;"></span>
  <span style="background-color: #fff; color: #991f14; font-size: 0.8125rem; padding: 0.25rem;">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" style="background-color: transparent;background-image: linear-gradient(135deg,#b3b3b3 10%,transparent 10%,transparent 50%,#b3b3b3 50%,#b3b3b3 60%,transparent 60%,transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
  <span class="sjv-i-plus" style="background-color: #fff; color: #991f14; font-size: 0.8125rem; padding: 0.25rem;"></span>
  <span style="background-color: #fff; color: #991f14; font-size: 0.8125rem; padding: 0.25rem;">Content B</span>
  <span class="sjv-i-extern-lank" style="background-color: #fff; color: #991f14; font-size: 0.8125rem; padding: 0.25rem;"></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" style="background-color: transparent;background-image: linear-gradient(135deg,#b3b3b3 10%,transparent 10%,transparent 50%,#b3b3b3 50%,#b3b3b3 60%,transparent 60%,transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
  <span style="background-color: #fff; color: #991f14; font-size: 0.8125rem; padding: 0.25rem;">Content</span>
  <span class="sjv-i-extern-lank" style="background-color: #fff; color: #991f14; font-size: 0.8125rem; padding: 0.25rem;"></span>
</div>

Senast publicerad 2024-04-26

Sidansvarig för sidan är Styleguide