Profile Completion Card
Profile setup progress card with a 70% bar, three remaining steps with quick-action buttons, and completed steps struck through.
Profile setup progress card with a 70% bar, three remaining steps with quick-action buttons, and completed steps struck through.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Profile Completion Card shows a single-card summary of setup progress: 7 of 10 steps done, rendered as a filled bar at 70 % with the percentage in the corner. Below it, three remaining steps each carry a short rationale (Lets teammates recognise you at a glance in comments and mentions) and a quick-action button, Upload photo, Set timezone, Connect calendar. Completed steps are struck through in a second section of the same ruled list.
Steps and done items are two const arrays. The honest footer note is what makes the card feel safe: a complete profile is optional, it just helps teammates identify you in mentions, schedule meetings across time zones, and include you in calendar-aware reminders.
Reach for this block on the account or profile settings page, wired to your completion endpoint. Hide the card once all steps are done or let users dismiss it.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the new-user onboarding nudge inside settings. Other completions:
Tip: action buttons on remaining steps outperform a single Edit profile link because each step is one click away instead of three.