Image + Text Component
The ‘Image + Text’ component allows administrators to display text and an image side by side within a page.
Admins have the ability to choose whether to display the image on the left or right of the section. They may also independently choose whether to display the image above, or beneath the content when on mobile resolutions.
The component’s container width is also configurable, with 4 width options to choose from.
Title goes here
Ut a nisl id ante tempus hendrerit. Ut non enim eleifend felis pretium feugiat. Phasellus a est. Suspendisse feugiat. Donec mollis hendrerit risus.
Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed hendrerit. Cras non dolor. Vivamus aliquet elit ac nisl. Sed fringilla mauris sit amet nibh.
While the above example displays an image on the right of the content on desktop, the below displays the image on the left. In both cases, the image has been set to display above the content on mobile devices.
Title goes here
Ut a nisl id ante tempus hendrerit. Ut non enim eleifend felis pretium feugiat. Phasellus a est. Suspendisse feugiat. Donec mollis hendrerit risus.
Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed hendrerit. Cras non dolor. Vivamus aliquet elit ac nisl. Sed fringilla mauris sit amet nibh.
The below components are identical, barring different component widths being set (from widest to narrowest) in order to showcase the range of widths available for use.
Widest
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras ultricies mi eu turpis hendrerit fringilla. Fusce vel dui. Vestibulum suscipit nulla quis orci. Sed hendrerit.
Suspendisse eu ligula. Suspendisse non nisl sit amet velit hendrerit rutrum. Aenean ut eros et nisl sagittis vestibulum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse potenti.
Wide
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras ultricies mi eu turpis hendrerit fringilla. Fusce vel dui. Vestibulum suscipit nulla quis orci. Sed hendrerit.
Suspendisse eu ligula. Suspendisse non nisl sit amet velit hendrerit rutrum. Aenean ut eros et nisl sagittis vestibulum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse potenti.
Narrow
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras ultricies mi eu turpis hendrerit fringilla. Fusce vel dui. Vestibulum suscipit nulla quis orci. Sed hendrerit.
Suspendisse eu ligula. Suspendisse non nisl sit amet velit hendrerit rutrum. Aenean ut eros et nisl sagittis vestibulum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse potenti.
Narrowest
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras ultricies mi eu turpis hendrerit fringilla. Fusce vel dui. Vestibulum suscipit nulla quis orci. Sed hendrerit.
Suspendisse eu ligula. Suspendisse non nisl sit amet velit hendrerit rutrum. Aenean ut eros et nisl sagittis vestibulum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse potenti.