Check out how the component looks like at sample.isomer.gov.sg.
Image with Text component, also known as Contentpic, is designed for use cases where the image needs to be displayed alongside text, with a fixed container size on desktop and flexibility on mobile.
Requirements
Minimum image size - 360px by 440px.
Optimal aspect ratio - The best performance is achieved when the image's aspect ratio closely matches the fixed desktop dimensions of 200px by 240px.
.webpformat is preferred because it provides better compression without losing much quality.If you have a very strong need for a moving image (commonly known as GIFs), use an
.png(animated png) file format. However, we generally discourage against moving images as they can be inaccessible and in poor quality.
All images must have a descriptive alternate text.
Best practices for using image with text
If using for headshots
If including a headshot, ensure there is adequate space/bleed around the person's head to avoid cropping, especially on smaller screens. The image should not have the head too close to the edge.
Image should not contain any text or detailed imagery
The image should complement the text and not overshadow it, especially on smaller screens.
Read more about our images best practices.