Search blocks by description or jump to a page.
A profile layout split into tabs for account, security, and notifications. Use it to organize many settings without crowding a single long page.
Tabbed User Profile opens with a header row: a circular avatar on the left and an "Account Settings" heading with a short subtitle beside it. Below that sits a tab bar with three labeled tabs, Profile, Security, and Notifications, each carrying a small icon. The active tab renders its content in cards underneath. Profile shows a two-column form grid for first name, last name, email, and role, a save button, and a second card listing connected third-party accounts with connect/disconnect buttons. Security shows two-factor authentication and password controls, then an active sessions card that lists each device, location, and last-seen time with a revoke button for non-current sessions. Notifications shows a list of four preference rows, each with a configure button.
Every tab is independent, so you can rewrite the form labels, swap the third-party account names, add or remove session rows, and adjust the notification categories without touching the other tabs. The header copy and avatar are also straightforward to replace.
This layout suits an account settings page inside a customer-facing application where a member manages several unrelated concerns at once. For an ecommerce storefront brand it is a natural fit for the "My Account" route where shoppers update their contact details, review connected payment or social accounts, and configure order notifications all in one place. The tab structure keeps each concern self-contained, which is better than a single long scrolling form when the sections are functionally distinct and users rarely need more than one at a time.
A natural flow around it on an Application page:
Before
After
The block covers three distinct settings areas, each replaceable with your own content:
Tip: if your product has a billing section, link the Security tab's session list to a dedicated billing block rather than extending this block further, so each tab stays focused and scannable.