Settings Profile 3 block design & features
SettingsProfile3 is a multi-card profile settings layout featuring a prominent cover image section. The first card displays a cover photo with overlay controls for changing or removing the image. The avatar overlaps the cover photo edge with a bordered circular frame and upload button.
Below the cover card, a Basic Information card contains display name, pronouns selector, and an about textarea with markdown hint. A separate Preferences card handles regional settings with language and timezone dropdowns using the Select component.
The cover image section uses a dark overlay for better button visibility. The avatar has a thick border matching the card background for clean visual separation. Cards are stacked with consistent spacing. Action buttons sit outside the cards at the bottom for a unified save action.
This layout suits social platforms, community apps, or any product where visual profile customization matters. The multi-card approach allows for future expansion with additional settings sections. Mobile layout adjusts the cover height and centers the avatar section.