Abstände

space

• space.0--space-04px

  Roh-Leiter, kleinste Stufe (z. B. Innenabstand einer Pille).

• space.1--space-16px

  Roh-Leiter.

• space.2--space-28px

  Roh-Leiter.

• space.3--space-312px

  Roh-Leiter.

• space.4--space-416px

  Roh-Leiter.

• space.5--space-524px

  Roh-Leiter.

• space.6--space-632px

  Roh-Leiter.

• space.7--space-748px

  Roh-Leiter.

• space.8--space-864px

  Roh-Leiter.

• space.9--space-996px

  Roh-Leiter.

• space.inset.xs--space-inset-xs4px ← space.0

  Innenabstand sehr klein (4px), z. B. vertikal in der Sidebar-Pille.

• space.inset.s--space-inset-s8px ← space.2

  Innenabstand klein.

• space.inset.m--space-inset-m16px ← space.4

  Innenabstand mittel.

• space.inset.l--space-inset-l24px ← space.5

  Innenabstand gross.

• space.inset.xl--space-inset-xl48px ← space.7

  Innenabstand extra-gross, z. B. große dekorative Karten (48px).

• space.inset.xxl--space-inset-xxl64px ← space.8

  Innenabstand doppelt-extra-gross (64px), eine Leiterstufe über inset.xl. Z. B. großzügige Hero-Flächen.

• space.gap.s--space-gap-s6px ← space.1

  Geschwisterabstand klein.

• space.gap.m--space-gap-m12px ← space.3

  Geschwisterabstand mittel.

• space.gap.l--space-gap-l16px ← space.4

  Geschwisterabstand gross.

• space.gap.xl--space-gap-xl24px ← space.5

  Geschwisterabstand extra-gross (24px), eine Leiterstufe über gap.lg. Z. B. Punkte einer Hauptnavigation, Spalten eines Bildrasters.

• space.gap.control--space-gap-control8px ← space.2

  Abstand zwischen Control oder Status-Icon und seinem Text (8px): Checkbox/Radio ↔ Label, Alert-Icon ↔ Text.

• space.layout.s--space-layout-s32px ← space.6

  Sektionsabstand klein.

• space.layout.m--space-layout-m48px ← space.7

  Sektionsabstand mittel.

• space.layout.l--space-layout-l96px ← space.9

  Sektionsabstand gross.

• space.layout.gutter--space-layout-gutter24px ← space.5

  Horizontaler Seitenrand (links/rechts), z. B. Header-Padding.