Popover with Anvil2 layout and content components to preview an entity’s key details on hover. Each example below is a starting point: copy it, then adapt the content and dimensions to your data. For guidance on when a peek is the right pattern, see the Peek pattern.
Resources
Peek pattern
When to use peeks and related guidance.
Peek
Figma reference implementations for peek popover lockups.
Demo
Demonstrates the core peek behavior: aPopover that opens on hover to preview a customer’s identity, status, and balance. Use this as the starting point for most peeks.
Usage
Pairs anAvatar with a name and a supporting line. Use for a minimal identity peek when only the entity’s name and status matter.
Activity Feed
Stacks recent events inCard rows beneath a header with quick actions. Use to surface an entity’s latest activity, such as mentions, updates, and reminders.
Summary
Combines an identity header, aDivider, and a Toolbar of contact actions. Use when the peek should both identify the entity and offer immediate next steps.
Simple
Presents an identity header above a collapsingToolbar. Use for a compact peek that keeps actions available while letting them collapse into an overflow menu when space is limited.
Activity Feed With Actions
Extends the activity feed with aButton on each row. Use when every item needs its own action, such as approve or view.
Empty
Shows an empty-state message inside the peek. Use when an entity has no data to preview yet.Max Width Max Height
ConstrainsPopover.Content to the suggested maximum dimensions. Use as a reference for sizing peek content and keeping it within the recommended bounds.