Foundation
← Foundation

Größen

Größen für Controls, Icons, Avatare und Breiten.

size

  • size.control.s--size-control-s32px

    Control-Höhe klein.

  • size.control.m--size-control-m40px

    Control-Höhe mittel (Standard).

  • size.control.l--size-control-l48px

    Control-Höhe gross.

  • size.button.s--size-button-s40px ← size.control.m

    Button-Höhe S = Standard. Immer gleich hoch wie alle Controls (size.control.m), damit beides in einer Reihe kombinierbar ist.

  • size.button.m--size-button-m48px

    Button-Höhe M – hervorgehobene Buttons, z. B. Hero-CTA.

  • size.button.l--size-button-l56px

    Button-Höhe L – Ausnahme: prominenter Button allein in einer Section (Landingpage).

  • size.listbox.max--size-listbox-max300px

    Maximale Höhe der Listbox einer Combobox, danach scrollt sie (Select: bis 7 Optionen).

  • size.field.min--size-field-min200px

    Mindestbreite von Form Field, Select und Combobox. In schmalen Containern höchstens 100 %.

  • size.field.max--size-field-max768px

    Maximale Breite von Form Field, Select und Combobox (Desktop). Darunter füllen sie den Container.

  • size.icon.s--size-icon-s16px

    Icon neben Body-Text (body.s/label).

  • size.icon.m--size-icon-m20px

    Icon neben Body-Text (body.m).

  • size.icon.l--size-icon-l24px

    Icon in grossen Containern (Avatar-lg, Hero).

  • size.avatar.s--size-avatar-s36px

    Avatar klein (Inline, List-Item).

  • size.avatar.m--size-avatar-m48px

    Avatar mittel (Standard).

  • size.avatar.l--size-avatar-l64px

    Avatar gross (Profil-Header).

  • size.indicator--size-indicator2px

    Dicke des aktiven Tab-Indikators (Unterstrich).

  • size.check--size-check18px

    Seitenlänge Checkbox / Durchmesser Radio.

  • size.sidebarTab--size-sidebar-tab78px

    Höhe eines Tabs in der Sidebar-Leiste (Icon + Label-Pille, Innenabstand 16px oben/unten).

  • size.toggleHeight--size-toggle-height20px

    Toggle-Track-Höhe.

  • size.toggleWidth--size-toggle-width36px

    Toggle-Track-Breite.

  • size.dot--size-dot10px

    Punkt-Indikator (Carousel-Pagination), sichtbare Größe. Trefferfläche: size.dot-target.

  • size.dotTarget--size-dot-target24px

    Mindest-Trefferfläche kleiner Steuerpunkte (WCAG 2.5.8 Target Size, 24×24 CSS-px).

width

  • width.prose--width-prose65ch

    Lesebreite.

  • width.content--width-content1024px

    Inhaltsbereich.

  • width.page--width-page1280px

    Seitenbegrenzung.

  • width.sidebar--width-sidebar100px

    Schmale Sidebar-Leiste (Icon oben, Label darunter).

  • width.sidebarDrawer--width-sidebar-drawer224px

    Overlay-Drawer der Sidebar (Level 2 + Level 3).

  • width.reading--width-reading900px

    Lesebreite für Doku-Inhalte (Design-System-Bereich): angenehme Zeilenlänge neben der Sidebar.