Isomer's hero banner component assumes a maximum viewport width of 2560px, these covers most display resolutions used in Singapore.
All aspect ratios are width:height.
Summary
A hero banner introduces your site at a glance, guiding users toward the most important action or information. Choose from 4 different hero banner styles to best represent your agency.
Image guidelines
Use high-quality, professional images. Crisp, well-composed photos make the difference between “nice” and “memorable.” Avoid pixelation, over-compression, or poorly lit shots.
Avoid putting text in images. Text in images doesn’t scale, isn’t accessible, and is a pain to maintain in the future (imagine if you lose the Illustrator file!). Our components come with title and description fields that you can use.
Be intentional about brand fit. Choose imagery that reflects how you want to be seen and perceived. For example, if you’re a community-focused agency, use an image with real Singaporeans.
Hero banner styles
Gradient (default)
Block
Large image
Floating
Gradient
Works best when you want to feature an image while keeping text easy to read
Ideal for general use. This is a balanced option that works well across most content types.
Minimum size: 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
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
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
Large image
Works best when you want to create strong visual storytelling through a large, striking image
Ideal for campaigns or initiatives where imagery carries the main message
Keeps text minimal to let visuals take centre stage
Safe zone: The image will maintain an aspect ratio of 2:1 above mobile and 1:1 in mobile. If you have critical elements in the image (e.g., faces), keep them in the central 1:1 region.
Avoid: Weak filler images like an image of a landscape. If your image is weak, consider using the Gradient Hero variant.
Floating
Works best when you want to blend imagery and messaging in a dynamic layout
Overlaps text and image while ensuring the text remains clearly readable
Ideal for highlighting short, impactful messages without losing visual appeal.
Safe zone: The image will always maintain an aspect ratio of 3:2. The text will overlap with the image on larger screens, so test it out on Studio.