Gap
Layoutgapklasser används för att definiera avståndet mellan innehållet i en layout.
Om gap
Alla layoutklasser har sina egna responsiva klasser. Till exempel betyder l-gap-000 md:l-gap-010 lg:l-gap-020 att:
- l-gap-000 är standard
- md:l-gap-010 är på surfplatta och uppåt
- lg:l-gap-020 är på stationära skärmar och uppåt
Översikt av storlekarna
Klassnamn | Storlek i rem | Storlek i pixlar |
|---|---|---|
l-gap-000 | 0 | 0 |
l-gap-050 | 0.125rem | 2px |
l-gap-060 | 0.25rem | 4px |
l-gap-070 | 0.375rem | 6px |
l-gap-080 | 0.5rem | 8px |
l-gap-090 | 0.75rem | 12px |
l-gap-100 | 1rem | 16px |
l-gap-110 | 1.5rem | 24px |
l-gap-120 | 2rem | 32px |
l-gap-130 | 3rem | 48px |
l-gap-140 | 4rem | 64px |
l-gap-150 | 6rem | 96px |
l-gap-160 | 8rem | 120px |
l-gap-lg | 1.5rem | 24px |
l-gap-md | 1rem | 16px |
l-gap-sm | 0.375rem | 6px |
Senast publicerad
Sidansvarig för sidan är Styleguide