Styleguide

Container

Containerklasser används för att definiera huvudlayouten och de olika sektionerna i en layout.

Om container

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.

Alla containterklasser har sina egna responsiva klasser. Du kan till exempel byta från en fluidlayout på en mobil och surfplatta till en fastbreddslayout på stationära och större skärmar. Se kodexemplet:

<div class="l-container l-container--fluid lg:l-container">...</div>

Layouten utgår från att det ska se bra ut på en mobil, det vill säga mobile first. Layouten har klasser som påverkar utseendet på olika skärmstorlekar.

  • md: står det md: i början av klassnamnet så påverkar det hur det presenteras på alla surfplattor och uppåt
  • lg: står det lg: i början av klassnamnet så påverkar det bara hur det presenteras på stationära skärmar och uppåt

Finns det inget prefix till klassnamnet så påverkar det hur det presenteras på alla skärmstorlekar.

Container med innehåll som har fast bredd

Containern täcker alltid hela sidans bredd. Den här modulen anpassar innehållet i containern så att innehållet har en fast maximal bredd på 1140 pixlar. Det blå fältet symboliserar en sidas bredd.

Innehåll

HTML 
<div class="l-container">
   <div class="l-container__inner">
      <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</p>
      </div>
   </div>
</div>

Container med innehåll som har full bredd

Containern täcker hela sidans bredd. Den här modulen låter innehållet täcka hela sidans bredd utan marginal. Den blå färgen symboliserar en sidas bredd.

Innehåll

HTML 
<div class="l-container l-container--fluid">
   <div class="l-container__inner">
      <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</p>
      </div>
   </div>
</div>

Containermarginaler

Den här containern är egentligen samma som '"Container med innehåll som har fast bredd", men det finns marginaler även ovanför och under innehållet. Den blå färgen symboliserar sidans bredd.

Innehåll

HTML 
<section class="l-container l-container--margin-bottom md:l-container--margin-top lg:l-container--margin">
  <div class="l-container__inner">
    <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</p>
    </div>
  </div>
</section>
Klasser för containermarginalerna

Klassnamn

Margin

l-container--margin

4rem 0 4rem 0

l-container--margin-top

4rem 0 0 0

l-container--margin-bottom

0 0 4rem 0

Senast publicerad

Sidansvarig för sidan är Styleguide