Profile Page
个人主页
Aliases:个人主页个人资料页用户主页个人介绍页头像主页空间主页介绍一下自己的页面
What is it
An identity-centered page answering "who is this, what do they have, what do they do": cover and avatar establish visual identity, name, bio and stats follow, and tabs switch between content streams like posts, works or articles. Visitors see follow/message actions; the owner sees edit entries — same structure, different actions.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Communities and creator platforms showing identity and content
- Team member or author pages
- Users view or manage their public presence
✕ When not to use
- Pure account data editing — fold into settings
- Minimal contact cards with no content stream
- Official brand pages with conversion goals
Variants
Card Profile
卡片式
Info contained in one card, restrained and universal
Cover Profile
封面头图式
Big cover with overlapping avatar, the social standard
Minimal Profile
极简列表式
Avatar, one-liner and links — business-card style
Portfolio Profile
作品集式
A work grid carries the page
Page structure
- 01
Cover & avatar
First impression of identity; fixed cover and avatar ratios to avoid shift.
- 02
Identity
Name, role, bio, location and contact.
- 03
Stats
Key numbers such as followers or works, laid out horizontally.
- 04
Tabs
Works, saves, about — switching without leaving the page.
- 05
Actions
Follow, edit or share actions shown by permission.
Implementation
flexgridtransform: translateY(50%)object-fit: coverCover variant: overlap the avatar on the cover's lower edge with a negative margin and a ring stroke to separate it from the image. Stats split across flex columns; tabs switch streams while preserving scroll. Follow button has three states (follow/following/mutual) with distinct hover; owner view swaps actions for an avatar menu.
Related concepts
A small round or rounded-square image representing a user or organisation: photo, initials or an icon placeholder. Appears with names in navs, comments and member lists; can carry a status dot or stack several people together.
ComponentsContainsA row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsContainsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsContainsA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsContainsA small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsContains