UI/UX
Shield-Divider UI/UX
Designrichtlinien, Verwendungsregeln und visuelle Anatomie für diese Komponente.
Anatomy
Der Divider besteht aus einer einzelnen Linie, die horizontal oder vertikal ausgerichtet werden kann. Mit `inset` kann er von den Rändern eingerückt werden.
Einsatz
Der Divider trennt Inhaltsbereiche visuell, ohne semantische Bedeutung zu tragen.
Do
- Zur Strukturierung von Listen, Formularbereichen oder Content-Sektionen.
- Vertikal zur Trennung nebeneinanderliegender Elemente (z.B. in einer Toolbar).
- Inset nutzen, wenn der Container eigenes Padding hat.
Don't
- Nicht exzessiv einsetzen – zu viele Trennlinien fragmentieren das Layout.
- Nicht als Ersatz für visuellen Abstand (margin/padding) verwenden.
- Nicht mit interaktiven Inhalten kombinieren.