Layout
Container
Content
Fullbreddscontainer
Content
Grid
En kolumn
Content A
Content A has a child
Content A has a child
Content B is a larger text
Content C
Två kolumner
Content A
Content A has a child
Content A has a child
Content B is a larger text
Content C
Tre kolumner
Content A
Content A has a child
Content A has a child
Content B is a larger text
Content C
Fyra kolumner
Content A
Content A has a child
Content A has a child
Content B is a larger text
Content C
Content D
Content E
Inline layout
Content A
Content A has a child
Content A has a child
Content B is a larger text
Content C
Content D much larger text
Content E is a dummy text
Content F
Samma höjd
Content A
Content A has a child
Content A has a child
Content B is a larger 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 A has a child
Content B is a larger 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 A has a child
Content B is a larger 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 A has a child
Content B is a larger 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 A has a child
Content B is a larger 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 A is a sidbar
Content B
Content A
Content B is a sidbar
Ikon layout
Ikon
Content
Content
Ikon
Ikon A
Content B
Ikon 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 |
| 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 |