UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Responsive Layout Stability

Fixed-format UI elements need stable dimensions and responsive constraints to avoid shifts or overlap.

responsivestabilitylayout

Design Principle

Boards, toolbars, counters, and button groups need predefined sizing rules.

Principle Boards, toolbars, counters, and button groups need predefined sizing rules.

Design action Set min/max, aspect-ratio, grid tracks, and text wrapping/truncation rules for toolbars, cards, list rows, and controls.

Examples Positive example: Dashboards, creation tools, games, and admin lists. Counterexample: Card height changes on hover.

Apply when Dashboards, creation tools, games, and admin lists. Dynamic text, hover states, or loading changes content.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Set min/max, aspect-ratio, grid tracks, and text wrapping/truncation rules for toolbars, cards, list rows, and controls.

Apply When

  • Dashboards, creation tools, games, and admin lists.
  • Dynamic text, hover states, or loading changes content.

Avoid

  • Card height changes on hover.
  • Long words break buttons.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
82%
Version
v1
Published
6/6/2026