> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.
# EquaProfileDetails
> Design system reference for EquaProfileDetails, including Storybook, Figma, screenshots, and usage guidance
# EquaProfileDetails
> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaProfileDetails.stories.tsx`, Line: 17
## Purpose
Profile completion, verification, Equa ID, and account detail surface.
## Storybook
| Story | Reference |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| Final design - full profile details upgrade | [Storybook](http://localhost:6006/?path=/story/equa-profile-details--final-designs-mirror) |
| Completed Profile State | [Storybook](http://localhost:6006/?path=/story/equa-profile-details--completed-profile-state) |
| Compact Responsive Frame | [Storybook](http://localhost:6006/?path=/story/equa-profile-details--compact-responsive-frame) |
| Atomic Field Rows | [Storybook](http://localhost:6006/?path=/story/equa-profile-details--atomic-field-rows) |
| Equa Id Privacy Controls | [Storybook](http://localhost:6006/?path=/story/equa-profile-details--equa-id-privacy-controls) |
| Profile Links Rich Rows | [Storybook](http://localhost:6006/?path=/story/equa-profile-details--profile-links-rich-rows) |
| Security And Privacy | [Storybook](http://localhost:6006/?path=/story/equa-profile-details--security-and-privacy) |
| Identity Hero Micro Upgrade | [Storybook](http://localhost:6006/?path=/story/equa-profile-details--identity-hero-micro-upgrade) |
## API And Props
| Prop or Control | Source | Notes |
| --------------- | --------------------------------- | ------------------------------------- |
| UNVERIFIED | Not exposed in Storybook argTypes | Review component TypeScript interface |
Sources:
* `equa-patternlib-nextjs/src/components/profiledetails/profiledetails.tsx`, Line: 61
* `equa-patternlib-nextjs/src/components/profiledetails/index.ts`
* `equa-patternlib-nextjs/stories/EquaProfileDetails.stories.tsx`, Line: 17
## Figma
UNVERIFIED -- requires Figma node assignment
## Screenshots
| State | Asset |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equa dark theme | 
|
| Light theme | 
|
## Usage Notes
* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).
## Accessibility Notes
* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.