Profile card
A person, their role and a few numbers, with follow and message actions.
How it’s composed
- Avatar shows initials until a photo loads, and names the person for assistive technology.
- Badge shows the role, and a Status dot with a visible label shows availability; neither is an action.
- Button gives follow the primary weight and message the secondary.
Make it yours
Open this in a Preview card when people hover a name, or add a row of counts under the badges.
More patterns
Sign in
Email and password sign-in with a remember-me option, a recovery link and a single primary action.
Password recovery
Request a reset link by email, with a quiet description of what happens next and a route back to sign in.
Verify code
A six-digit one-time code, grouped in threes, with a resend action for the email that never arrived.
Notification settings
Grouped switches for email and push notifications, each with a one-line explanation.
Invite teammates
Invite by email with a role picker, above the list of people who already have access.
Choose a plan
Three plans as a radio group, with the price and what each includes, and one action to continue.
Upload progress
A list of files uploading in parallel, each with its own progress and a finished state.
Send feedback
A short rating and an open comment, the two questions that get answered most often.
Schedule a meeting
Pick a day on the calendar and one of the open time slots beside it.
Sound settings
Volume sliders for each channel and a switch for spatial audio.
API key
A secret key shown once, with a copy action, a warning and a way to roll it.