Text and Image | DE&S Service Catalogue

Usage

The Text and Image component allows a two-column display of text and images side by side in multiple variations.

The component allows for the following configuration:

Image on the left
Image on the right
White (no) background
Grey background
Text area as 50%
Text area as 60%
Optional Call-To-Action (CTA) button

Text and Image - image on the left

This variation has the image on the left and no background colour.

Praesent in urna quam. Nulla id rutrum elit. Donec porta augue et luctus maximus. In hac habitasse platea dictumst.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quis elementum orci. Aenean euismod imperdiet auctor. Nulla vitae sagittis mi. Nullam quis congue neque. Maecenas vehicula ante quis arcu convallis malesuada. Sed varius vulputate urna, sed pellentesque nunc laoreet eu. Curabitur convallis ante euismod ligula finibus, vel congue neque auctor. Nunc aliquam eget nibh et accumsan. Nullam pharetra metus semper tellus auctor, ut maximus odio pellentesque. Etiam pretium blandit risus non volutpat. Phasellus aliquam velit nibh, sit amet blandit velit faucibus id.

Text and Image - image on the right

This variation has the image on the right and a grey background. The button can optionally be added to link to supporting content.

Praesent in urna quam. Nulla id rutrum elit. Donec porta augue et luctus maximus. In hac habitasse platea dictumst.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quis elementum orci. Aenean euismod imperdiet auctor. Nulla vitae sagittis mi. Nullam quis congue neque. Maecenas vehicula ante quis arcu convallis malesuada. Sed varius vulputate urna, sed pellentesque nunc laoreet eu. Curabitur convallis ante euismod ligula finibus, vel congue neque auctor. Nunc aliquam eget nibh et accumsan. Nullam pharetra metus semper tellus auctor, ut maximus odio pellentesque. Etiam pretium blandit risus non volutpat. Phasellus aliquam velit nibh, sit amet blandit velit faucibus id.

Find out more

Text and Image - image on the left - 40/60

This variation has the image on the left and no background colour.

Praesent in urna quam. Nulla id rutrum elit. Donec porta augue et luctus maximus. In hac habitasse platea dictumst.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quis elementum orci. Aenean euismod imperdiet auctor. Nulla vitae sagittis mi. Nullam quis congue neque. Maecenas vehicula ante quis arcu convallis malesuada. Sed varius vulputate urna, sed pellentesque nunc laoreet eu. Curabitur convallis ante euismod ligula finibus, vel congue neque auctor. Nunc aliquam eget nibh et accumsan. Nullam pharetra metus semper tellus auctor, ut maximus odio pellentesque. Etiam pretium blandit risus non volutpat. Phasellus aliquam velit nibh, sit amet blandit velit faucibus id.

Text and Image - image on the right - 60/40

This variation has the image on the right, a grey background and the text area set to 60%. The button can optionally be added to link to supporting content.

Praesent in urna quam. Nulla id rutrum elit. Donec porta augue et luctus maximus. In hac habitasse platea dictumst.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quis elementum orci. Aenean euismod imperdiet auctor. Nulla vitae sagittis mi. Nullam quis congue neque. Maecenas vehicula ante quis arcu convallis malesuada. Sed varius vulputate urna, sed pellentesque nunc laoreet eu. Curabitur convallis ante euismod ligula finibus, vel congue neque auctor. Nunc aliquam eget nibh et accumsan. Nullam pharetra metus semper tellus auctor, ut maximus odio pellentesque. Etiam pretium blandit risus non volutpat. Phasellus aliquam velit nibh, sit amet blandit velit faucibus id.

Find out more