Page type used: None
Can only be used in this row option: Single column - Full width
Mobile:
- The image becomes rectangle, is placed above the text, and takes up the whole width
- The text is centered
- Bullets lists are left aligned
Tips:
- Best to have 1-3 short paragraphs in the main body along with a CTA
- Is not meant to be re-useable
Issue: When the light version is selected, the CTA is the white outline and it can't be changed.
Specs:
- Must be built from scratch
- Text is centered vertically to image unless the text is taller than the image, then everything is top aligned
- CTA's can be opened in a new window
- CTA's have 11 button styles
- Image
- Placement: right or left
- Size: 648x480px
- The CSS will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one or a few of the edges
Title (optional)
Text (optional)
Links can be added in the main body text
Custom code can be added via the rich text editor but should be used sparingly
- Bullet lists allowed but use sparingly
- If your picture is smaller than the recommended size it will zoom in like this one and look pixelated
- Try to keep the content in this area short because if it's too long the text and CTA will be lower than the image
- It also looks weird with very little text. Paragraphs work best for this widget
Zig zag - A good example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula lorem sit amet metus ultricies ornare. Nulla aliquam tempor odio tempus pulvinar. Ut interdum ultricies congue. Suspendisse id ultricies velit, sed eleifend felis. Suspendisse quis interdum tortor.
Praesent erat dui, rhoncus lacinia pellentesque tempus, vehicula a elit. In quam odio, efficitur sed dolor vel, ultricies commodo nisi. Etiam at facilisis tellus. Fusce sagittis urna porttitor hendrerit ornare.
An example where we only use the title field
Black bordered CTALight version
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula lorem sit amet metus ultricies ornare. Nulla aliquam tempor odio tempus pulvinar. Ut interdum ultricies congue. Suspendisse id ultricies velit, sed eleifend felis. Suspendisse quis interdum tortor.
Praesent erat dui, rhoncus lacinia pellentesque tempus, vehicula a elit. In quam odio, efficitur sed dolor vel, ultricies commodo nisi. Etiam at facilisis tellus. Fusce sagittis urna porttitor hendrerit ornare.
An example where we only use the text field - Praesent erat dui, rhoncus lacinia pellentesque tempus, vehicula a elit. In quam odio, efficitur sed dolor vel, ultricies commodo nisi. Etiam at facilisis tellus. Fusce sagittis urna porttitor hendrerit ornare.