About Page
关于页
Aliases:关于页关于我们公司介绍页团队介绍页我们是谁品牌故事页关于我们页面
What is it
A brand page explaining who you are: a mission statement sets the tone, then story and milestones build trust, and the end points to contact or careers.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Visitors want to know the team and background before deciding
- The brand needs to communicate mission and values
- Hiring, funding or partnerships need a credible introduction
✕ When not to use
- Users only care about features and price — use a landing or pricing page
- Team or company details are not settled yet
- The page must carry complex task flows
Variants
Brand Story
品牌故事
A founder-led narrative where emotion and imagery lead
Team Grid
团队展示
Avatar grid with roles and short bios, putting people first
Timeline
历程时间线
A timeline strings milestones and key numbers together
Page structure
- 01
Header
Site nav and primary CTA, consistent with the rest of the site.
- 02
Mission
One oversized statement beside a brand image answers why you exist.
- 03
Story
The origin story or timeline builds credibility with concrete events and years.
- 04
Team
A grid of avatars, names and roles, with one line each for small teams.
- 05
Values
Three or four principles, each with one line of explanation, not slogans.
- 06
CTA
Points to contact, careers or the product, giving readers a next step.
Implementation
flexgridgrid-template-columns: repeat(auto-fit, minmax(220px, 1fr))gapobject-fit: coverStack sections vertically; lay the team and values out with an auto-fit grid; keep avatars square and object-fit: cover so they never stretch. Fade sections in as they enter, respecting prefers-reduced-motion, and keep text-on-image contrast at WCAG AA.
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 display that orders events by time, using timestamps, markers and content to explain sequence. It works for activity logs, project journals or order history. Unlike a stepper, which emphasizes task stages to complete, a timeline tells an event story. Keep titles and times visible when details expand.
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.
ComponentsContainsElements stay hidden until they enter the viewport, then play a fade, rise or slide-in — once. It replaces "dump everything at once" with content revealed at the pace of reading, giving long pages a sense of order. Usually triggered by IntersectionObserver.
MotionUsed withA page that collects messages: a short form asks only what is needed and confirms success, with email, phone and address alongside plus a brief FAQ.
PagesSimilar