Comparison file · containers
Card vs Empty State vs Scrim vs Skeleton Loader vs Divider vs Sticky & Fixed vs Drag and Drop vs Avatar Group
Choose between a content container, an instructional empty view, and a layered blocking surface.
Run the diagnosisFast decision
Start with the behavior that changes the build
Card
A Card is a container pattern, not a semantic surface like a Dialog. Do not confuse a clickable card with a button unless the entire region must remain operable as one control.
Open field note ↗Empty State
An empty state should guide the user, not punish them. Offer one clear next step without burying it in explanation.
Open field note ↗Scrim
A scrim communicates modality visually and blocks background interaction. Do not use it for toasts, tooltips, or non-modal surfaces.
Open field note ↗Skeleton Loader
A skeleton suggests a known layout shape; a spinner signals an unknown duration. Choose based on whether you can predict the content structure.
Open field note ↗Divider
A divider is a presentation or structural boundary. Do not use a divider when the semantic boundary is already clear from spacing or headings alone.
Open field note ↗Sticky & Fixed
Sticky is scoped to a parent container; fixed applies to the entire viewport. Choose sticky when the element should not outlive its section.
Open field note ↗Drag and Drop
Drag and drop is a direct interaction model, not a presentation pattern. Ensure a keyboard and screen-reader accessible alternative exists for every drag operation.
Open field note ↗Avatar Group
Use an Avatar Group for a compact people summary; use a list when every person and label must be visible or independently actionable.
Open field note ↗Behavior matrix
Compare contracts, not silhouettes
| Decision | Card | Empty State | Scrim | Skeleton Loader | Divider | Sticky & Fixed | Drag and Drop | Avatar Group |
|---|---|---|---|---|---|---|---|---|
| Structure | Generic expandable region. | Generic expandable region. | Generic expandable region. | Generic expandable region. | Generic expandable region. | Generic expandable region. | Generic expandable region. | Generic expandable region. |
| Placement | Typically arranged in a grid, list, or stack layout. | Centered within the content area it represents, often with generous whitespace. | Covers the entire viewport behind the modal surface. | Occupies the same layout space as the content it represents. | Between sections, or between groups inside a menu or panel. | Sticky: inside a container, toggles between static and fixed at a scroll threshold. Fixed: relative to the viewport at a configured edge. | In-page direct manipulation; drop zones may be inline, between items, or in a dedicated area. | Inline near ownership, collaborators, participants, or assigned users. |
| Modality | Non-modal structural content. | Non-modal inline view. | Blocks interaction with content behind it; content is inert. | Non-modal inline presentation. | Non-modal decorative or structural element. | Non-modal persistent positioning behavior. | Non-modal direct manipulation. | Non-modal inline summary. |
| Interactive content | May contain links, buttons, or form controls; the card itself can be interactive when it wraps one primary action. | Contains at most one or two clear actions — typically create, import, or adjust filters. | Usually non-interactive beyond optional click-to-dismiss behavior. | Not interactive during loading; may show a cancel button when loading is user-initiated. | Not interactive by itself; a menu separator marks group boundaries without being an item. | May contain any interactive content appropriate for a persistent header, toolbar, or feedback button. | The dragged element and drop targets are interactive; the drag source remains available. | May link to profiles or open a complete member list, but the group itself can remain informational. |
| Persistence | Persistent until content changes, filtering, or navigation removes it. | Remains until data or user action fills the area. | Remains for the duration of the modal presentation. | Temporary — exists only for the duration of the loading period. | Persistent as long as the structural distinction remains. | Persists while the scroll condition or viewport remains. | The new position or association persists after the drop. | Reflects the current membership or participants associated with the item. |
Discriminating questions
Ask only what changes the result
- Does this surface block interaction with the content behind it?Yes / No
- Is the purpose to guide users when no content exists yet?Yes / No
Implementation consequences
Turn the comparison into a build decision
The final choice must explain both the selected contract and the alternatives it excludes.
Name the task
Choose between a content container, an instructional empty view, and a layered blocking surface. Write the user goal before choosing any component from a library.
Freeze the decisive dimensions
For this group, compare Structure, Placement, Modality, Interactive content, Persistence. Do not allow visual similarity to replace those requirements.
State the exclusion
Record why the closest rejected pattern fails. That reason helps a coding agent avoid silently substituting a familiar but incompatible component.
Verify the behavior
Open the selected pattern reference, copy its acceptance checks, and test focus, keyboard, dismissal, placement, content, and mobile behavior in the real interface.
Frequently asked questions
Card vs Empty State vs Scrim vs Skeleton Loader vs Divider vs Sticky & Fixed vs Drag and Drop vs Avatar Group questions
Direct answers based on the reviewed behavior contract above.
What is the main difference between Card, Empty State, Scrim, Skeleton Loader, Divider, Sticky & Fixed, Drag and Drop, Avatar Group?
Choose between a content container, an instructional empty view, and a layered blocking surface. The decisive dimensions on this page are Structure, Placement, Modality, Interactive content, Persistence. Read each column as a behavior contract, not as a visual style recommendation.
How do I choose among Card, Empty State, Scrim, Skeleton Loader, Divider, Sticky & Fixed, Drag and Drop, Avatar Group?
Begin with the required user task, then answer the discriminating questions above. Choose the pattern whose purpose and behavior match the evidence, and explicitly reject alternatives whose focus, input, modality, persistence, or structural contract would break the task.
Can two of these terms apply to the same interface?
Sometimes. This taxonomy includes semantic patterns, composite patterns, presentation forms, behavior variants, message channels, and generic behavior labels. A presentation term and a semantic contract can coexist, so specify each required property instead of forcing every term into a flat either-or choice.
How should I verify the final implementation?
Open the selected pattern reference and run its observable checks. At minimum, confirm the configured trigger, dismissal, focus, keyboard behavior, interactive content, placement, and mobile adaptation. Also verify the linked official or first-party source against the library you ship.