Image And Form
A split hero with a product image on one side and a signup form on the other. Balances visual proof with a clear path to start using the product.
A split hero with a product image on one side and a signup form on the other. Balances visual proof with a clear path to start using the product.
Search blocks by description or jump to a page.
Image and Form is a split hero. The left half holds all the interactive content: a large headline, a one-line subtext, a full-width Google sign-in button, a divider with an "Or" label, and a stacked signup form with full name, email, and password fields followed by a submit button. The right half is a tall product image that bleeds to the edge of the viewport, visible from the medium breakpoint upward and hidden on smaller screens.
Every piece of the left column is independent. The headline and subtext are plain copy you can replace in seconds. The Google button and the email form are separate, so you can remove either path without affecting the other. The image slot accepts any tall asset and the form fields can be reordered or reduced to just email and password if full name is not needed.
Reach for this block when you want to open a project management workspace landing page with a strong visual and an immediate path to create an account. The side-by-side layout gives the image room to show the product in context while the form stays above the fold, which works better than a centered hero when the signup step itself is the primary goal of the page.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The block fits any product that pairs a visual with a direct signup path. A few concrete ways to fill it:
Tip: choose an image with strong vertical composition and a neutral or dark edge on the left so the form text stays readable where the two halves meet.