Layout

Container

Content

Fullbreddscontainer

Content

Grid

En kolumn

Content A

Content A has a child

Content B is a longer text

Content C

Två kolumner

Content A

Content A has a child

Content B is a longer text

Content C

Tre kolumner

Content A

Content A has a child

Content B is a longer text

Content C

Fyra kolumner

Content A

Content A has a child

Content B is a longer text

Content C

Content D

Content E

Inline layout

Content A

Content A has a child

Content B is a longer text

Content C

Content D much larger text

Content E is a dummy text

Content F

Exempel

Samma höjd

Content A

Content A has a child

Content B is a longer text

Content C

Content D much larger text

Content E is a dummy text

Content F

Högerjusterad

Content A

Content A has a child

Content B is a longer text

Content C

Content D much larger text

Content E is a dummy text

Content F

Nowrap

Content A

Content A has a child

Content B is a longer text

Content C

Content D much larger text

Content E is a dummy text

Content F

Centerjusterad

Content A

Content A has a child

Content B is a longer text

Content C

Content D much larger text

Content E is a dummy text

Content F

Responsiv

Content A

Content A has a child

Content B is a longer text

Content C

Content D much larger text

Content E is a dummy text

Content F

Sidpanel layout

Content 1

Content N

Content N

Content 1

Media layout

Content B

Content A

Ikon layout

Content

Content

Content B

Viktad layout

Content A

Content B

Content A

Content B

Centerjusterat layout

Content

Horisontell layout

Content A

Content B

Extra long Content C with extra texts and takes up extra space

Content D

Vertikal layout

Content A

Content B

Extra long Content C with extra texts and takes up extra space

Content D

Content A

Content B

Extra long Content C with extra texts and takes up extra space

Content A

Extra long Content B with extra texts and takes up extra space

Översikt

Namn Klass
Container l-container > l-container__inner Hjälpklasser Container margin-top: l-container--mt Container margin-bottom: l-container--mb
Fullbreddscontainer l-container-fluid > l-container__inner
Grid col 1: l-grid col 2: l-grid-col-2 l-responsive-mobile col 3: l-grid-col-3 l-responsive-tablet l-responsive-mobile col 4: l-grid-col-4 l-responsive-tablet l-responsive-mobile
Inline layout l-col
Sidpanel layout Left: l-col-1-n l-gap-lg l-responsive-mobile Right: l-col-n-1 l-gap-lg l-responsive-mobile
Media layout Left: l-col-1-n l-responsive-mobile Right: l-col-n-1 l-responsive-mobile
Ikon layout Left: l-col-1-n l-gap-sm Right: l-col-n-1 l-gap-sm
Viktad layout Left: l-col-1-2 l-responsive-mobile Right: l-col-2-1 l-responsive-mobile
Centerjusterat layout l-col-center
Horisontell layout l-col-horizontal
Vertikal layout l-col-vertical
Hjälpklasser
Gap Large: l-gap-lg Medium: l-gap-md (Default i layouts) Small: l-gap-sm
100% width l-100-wd
Layout Inline-sammahöjd: l-same-height Högerjusterad: l-justify-right Centerjusterad: l-align-center Nowrap: l-nowrap Wrap: l-wrap
Responsiv Responsiv mobil: l-responsive-mobile Responsiv tablet: l-responsive-tablet