Image and text
Serpentine, zigzag or checker board layout of image and text breaks monotony and adds visual interest to a long page.
Dummy title appears here
Body text is shown below title and is positioned to the left hand side of the image.
A button can be added
Dummy title appears here
Body text is shown below title and is positioned to the right hand side of the image in the second instance creating a zigzag effect of content.
Dummy title appears here
Body text is shown below title and is positioned to the left hand side of the image in the third instance continuing to create a zigzag effect of content.
When to use this component
Use this component:
- To display image and text together
- Ideally 4 rows would be the maximum usage to create a short list otherwise users will scroll past to the next piece of content
- Always include a description
- For before and after comparison consider using image cards instead.
When not to use this component
Do not use this component to:
- As an alternative to a gallery of images.
- Complex imagery will overwhelm the users eyes and should not be used in this component.