# Profile hero

Profile hero: a free component, built on your design tokens, to use at the top of a profile page in a social or creator app. The top of a person's profile: a cover photo, their photo in a story ring, name, handle and tags, a short bio with a link, posts, followers and following, Follow and Message, and a row of story highlights with photo covers.

Prompt: Add the OpenDesigner component profile-hero to this project: https://opendesigner.dev/library/r/profile-hero.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: follow, following, hover, focus, phone, wide.

Accessibility: The name is the section heading, Follow is a toggle with aria-pressed that also updates the follower count, the counts and highlights are buttons with visible text, the cover photo has a description, and the profile photo and highlight covers are decorative next to their visible names.

File: https://opendesigner.dev/library/r/profile-hero.html