Original Guide
Local shadow-scale grid
shadow-smCards, reusable panels, and quiet product surfaces.
shadow-lgDropdowns, popovers, toasts, and menus.
The Guide controls its own responsive columns and generous gap.
The original Guide arranges related examples in a spacious responsive grid. The approved shared comparison preserves that calm rhythm and keeps specimens readable before it asks them to sit side by side.
DemoComparison uses wider reading columns and a larger gap. It adds no frame, padding, labels, child wrappers or paint that could change the CSS lesson.The same shadow-sm and shadow-lg cards appear in each treatment. Resize the page to see when the pair stacks.
The elevation guide keeps its original six-card shadow scale.
Small controls, table rows, and subtle raised states.
Cards, reusable panels, and quiet product surfaces.
Hover lift, floating toolbars, and command surfaces.
Dropdowns, popovers, toasts, and menus.
Drawers, dialogs, and focused panels.
Modals and spotlight surfaces above a dimmed page.
The shared layout is available for future comparisons. The existing Guide grid remains intact.