In-Page – Vertical w/ Image
Layout Variant: F001
Content Type: Collection
| Teaser Title | Teaser Text | Pictures and Media | Items | CTAs |
F001 Collection | -- | -- | -- | Yes | -- |
Teaser (Left Content) | Yes | Yes | Yes | -- | Optional |
HTML Fragment (Right Content) | -- | -- | -- | -- | -- |
Aspect Ratio:
Expected Use:
- This form is right aligned with against an image, headline, and body copy. Use this form component when you want to supplement the form with additional information that will inspire the user to fill out the form.
- Expected to be used with an HTML Fragment as the right section of component and a teaser as the left side of the component. Content Authors should test and style forms appropriately to fit space provided by component. There are no logic imposed guidelines, but forms are expected to follow styling and standards established by governance. They should match the CSS of your site and use the design patterns supplied for emerson.com forms.
Building the F001 Collection:
The F001 component is made of a Teaser (with description and image and optional CTA) and a form (using an HTML Fragment content type.) Content Authors should be aware of spacing as they create the form. The height of the component increases to greatest height between the Teaser and forms.
For the F001 Collection there are no fields required other than the two Items in the Items List and setting the Layout Variant to F001. You must add the Teaser as the first Item in the Items List and the Form (HTML Fragment) as the second Item.
Building the Teaser:
This is a standard Teaser usage.
- Teaser Title - this is the Headline on the left side
- Teaser Text - this is the body copy on the left side
- Pictures and Other Media - this is the image shown to highlight the content
- Teaser Target - not used, use Call-to-Action Button
- Call-to-Action-Button - you can optionally set the "Use Linked Call-to-Action Label" and include a Page or other teasable content
- Layout Variant - set to Default
Note that authors have the optional ability to modify the Background via the "Background Color" section under the collection's Content Tab.
Adding the Form:
You can use an HTML Fragment to embed a form. This content type has no innate styling, but the Content author should create with to match the store's theme (CSS). Add the Data URL of the content you are pulling into the component.
