Hero Simple

Use this component at the start of pages to introduce the content that doesn't require a graphic or interactive element.

An image of the Hero Simple pattern
When to use

The Hero Simple component can be used at the start of pages to introduce content that doesn't require a graphic of interactive element. It comes in three themes of Light, Bright Green and Forest Green. The headline and copy should be kept concise and informative.

An image of the Hero Simple pattern in Light theme
Light
An image of the Hero Simple pattern in Bright Green theme
Bright Green
An image of the Hero Simple pattern in Forest Green theme
Forest Green
Content & localisation

To ensure that the Hero Simple component remains visually appealing and accommodates different languages, adhere to the following content limitations:

  • Headline: The headline should be short and precise. Ideally fitting across two lines.

  • Body Copy: The body copy should be precise and clear, keeping in line with our tone of voice. Avoid adding paragraphs of text that might overwhelm the user.

By following these guidelines, you ensure that the Hero Simple component can comfortably accommodate different languages while maintaining a consistent and visually pleasing design.

An image of the Hero Simple pattern in another language
Translated length +20%
Responsive Layout

These are the examples of the Hero Simple component across different screen sizes.

An image of the Hero Simple pattern on mobile
Mobile - 390px
An image of the Hero Simple pattern on tablet
Tablet - 768px
An image of the Hero Simple pattern on desktop
Desktop - 1440px