Profile Snapshot

An at-a-glance account overview card displaying the user's identity, masked contact information, and quick actions for account management.

Email j***e@email.com

Phone (***) ***-4567

Usage Notes

When to use: Display this pattern on dashboard or account settings pages to give users a quick summary of their account status, masked contact details, and access to common account actions.
Accessibility considerations: The avatar has an ariaLabel for screen readers. Contact information is masked by default for privacy. Edit buttons include descriptive ariaLabel attributes specifying which field they modify. Action confirmations are announced via a live region.
NYSDS components used: nys-avatar, nys-badge, nys-button, nys-divider, nys-alert
Customization points: Replace demo data with real user data from your identity provider. The masked format can be adjusted to meet agency privacy requirements. Quick actions can be extended with additional buttons (e.g., "Manage Delegates", "Security Settings"). The avatar supports images via the image attribute when a profile photo is available.