search

db-ui / design-feedback

DB UX Design System - Design Issues for Figma & Sketch Libraries, Documentation
https://github.com/orgs/db-ui/projects/4
Apache License 2.0
2 stars 0 forks source link

Card Full width #107

Open JoMarieLe opened 3 weeks ago

JoMarieLe commented 3 weeks ago

The problem

Aktuell gibt es nur die normalen Cards, was aber dazu verleitet alles auf einzelne Kacheln zu setzen. Besser wäre es auch eine Card mit full width zu haben, um mehrere Elemente in einem Bereich zu gruppieren.

The solution

Full width cards anbieten wie sie im alten Design System vorhanden waren als Alternative zu den normalen Cards. Heißt eine Card ohne Ecken und ohne Border oder Schatten an den Seiten. Links wie es aussehen soll, rechts wie es aktuell aussieht. image

Examples

No response

MeDoingUX commented 3 weeks ago

Fullwidth Cards würden sich an einem übergeordneten Container oder einer Seite mit bestenfalls Auto-Layout orientieren, demnach könnte man die Card doch einfach auf das Resizing-Verhalten "Fill" umstellen, und du hättest dein Ziel erreicht. Braucht's dafür eine Komponente?

JoMarieLe commented 3 weeks ago

Es geht weniger um das Resizing-Verhalten sondern mehr um die Darstellung der Card. In der alten Lib gab es eine Karte, die keine abgerundeten Ecken hat und an den Seiten keinen Schatten oder Border. (Ergänze ich oben)

Natürlich kann man auch das händlisch bauen, jedoch merke ich in Projekten, dass nur eine card wie bisher dazu verleitet alles auf einzelne Cards zu setzen, statt eine große zu machen. Wodurch mehr der Kachel Look gepusht wird. Ist mir einfach aufgefallen :)

Links wie es aussehen sollte, rechts wie es aussieht: image

MeDoingUX commented 3 weeks ago

Verstehe, die Anpassung betrifft dann also Parameter die gelöscht/geleert müssen: Radius=0, Elevation=keine, Border Left & Right=0, halte ich für zumutbar.