Search blocks by description or jump to a page.
A form split into two columns of fields with a shared header and footer actions. Use it for longer profiles or billing details that fit a wider screen.
Two Column is a profile settings form housed inside a card. A card header carries the "Profile Settings" title, and the body holds two named sections separated by a divider. The first section, Personal Information, arranges first name, last name, email, and phone in a two column grid, then drops a full width textarea for a short bio below them. The second section, Address Information, starts with a full width street address field, then places city, state, postal code, and country in the same two column grid. A row of Cancel and Save Changes buttons sits flush right at the bottom of the card.
Each section has its own subheading and a short description line beneath it, so the purpose of each group is clear at a glance. The copy in every label, placeholder, and subheading is plain text you can replace, and the two sections are independent enough that you can remove one or add a third without affecting the layout grid.
Reach for this block when a user needs to update structured profile data in one place. In a product analytics SaaS it works well for the account settings page where workspace members fill in their contact details and billing address in a single form rather than navigating across separate pages. It handles more fields than the stacked single column variant without feeling crowded, and it is lighter than the complex form when you do not need tabs, toggles, or a sticky action bar.
A natural flow around it on an Application page:
Before
After
The block holds two independent form sections inside one card, all of which can be adjusted to fit your data model:
Tip: keep the two sections focused on one concern each so users know exactly what they are saving when they click the button.