Isomer's hero banner component assumes a maximum viewport width of 2560px, these covers most display resolutions used in Singapore.
For the avoidance of doubt, all aspect ratios are width:height.
General principles
The hero banner should:
Use a clean brand image that sets your website's tone - avoid cluttering it with detailed visuals or text
Place important elements (faces, buildings, key objects) in the centre, as edges may be cropped on different screen sizes
Skip text on images as they affect accessibility and may be cut off
For best results, use high-quality photos that:
Showcase Singapore through our people, places, and culture
Match your agency's identity and values
Gradient option
Guidelines
As a general rule of thumb, a hero banner image should:
Be minimum 2560px by 500px
Have a aspect ratio between 3:2 - 2:1 (width:height)
Have key objects of the image be placed in the center of the image
Not have any text (this is critical in this variant, as we place a gradient overlay)
What is the safe zone? How do I get my images not covered by text?
The visibility of your hero banner image is affected by these factors:
The amount of space occupied by your text and call-to-action (CTA) elements,
The dark gradient overlay that covers approximately 50% of the banner. This overlay is a built-in feature designed to ensure text remains legible regardless of the background image used.
The banner's height adjusts to accommodate the site title, description, and call-to-action buttons, so there's no fixed "safe zone." It is best to avoid placing important details at the top and bottom of the banner.
This is how a homepage gradient banner looks like if all fields are filled to the maximum character limits. (Left desktop; Right mobile)
Block option
The block layout
Works best when you want to emphasise your agency's brand identity
Displays content before images on mobile devices, prioritising what matters most to citizens
Automatically shifts the image below text on smaller screens for better readability
Guidelines
As a general rule of thumb, a hero banner image should:
Be minimum 1280px by 500px
Have a aspect ratio between 3:2 - 2:1 (width:height)
Have key objects of the image be placed in the center
Have no text
