The menu bar plays a central role in providing a user-friendly and organised navigation experience for visitors. Specifically, it ensures that candidates can navigate to relevant content with ease and is therefore present on every page to facilitate seamless site navigation.

On the left-hand side, we will have your logo followed by the categories of your pages.

When candidates navigate the site, they can seamlessly return to the home page by clicking the logo, and hovering over the categories will display a dropdown menu with the list of all pages in that category. The 'box' containing the list of pages has light rounded corners in this guide, as it aligns with the chosen brand guidance. However, it can have sharp corners if it better suits your brand. Please see the two options below.

On the right-hand side, we have the main call-to-action (CTA) button, which we called 'Search & Apply' (but you can name it as you please).

This button will lead the candidate to the main job search page, and there is the option to add another call to action if you have a candidate portal too. The CTAs can also be customised to feature rounded or sharp corners depending on your brand guidance.

The menu can be simply displayed over the hero (large image or video at the top of the page), or it can be highlighted in your brand colour. If you choose the last option, please consider that the hero will be slightly cropped. Please see example below:

The hero section, positioned at the top of the page, plays a pivotal role in setting the overall page tone.

To prevent cropping problems across different screen sizes, it's best to refrain from embedding text directly into the hero media. Notably, on mobile devices, where cropping often occurs, positioning the essential elements at the center of the image ensures consistent visibility."

For optimal responsiveness, as already mentioned, refrain from embedding text in the hero media as this can be overlaid separately and will then adjust based on the screen size. In addition to overlaying text on the hero image, you can also incorporate a call to action or search bar. The text, call to action, and search bar can be strategically positioned at the top, center, or bottom of the hero section. Moreover, the text offers flexibility to be centered, aligned to the left, or placed on the right side.

In the examples below, you can observe the hero section featuring either text + call to action or text + search bar.

• images (landscape): Height x Width = (1280 x 720px) or (1920 x 1080px), with 16:9 aspect ratio.  

• videos: 1920 x 1080, 1080p at least 25 fps

The Content is the heart of every page, where all the important information comes to life and you can communicate your brand story and values to website visitors. Every little component, from text modules to interactive media elements, plays its own special part in making the user experience unique. If you're ready to check out all the cool components available to you, just head to the dedicated page. Enjoy the exploration journey! 🚀

An important element that you will find on every page is our Accessibility widget, represented by the round 'man' icon located on the right side of the guide. As you may have noticed, this widget remains visible while scrolling and is designed to ensure every page of your careers hub meets the highest accessibility standards. Upon clicking the widget (please go ahead and do it), it opens a window with various options to improve usability, such as adjusting text size, changing color contrast, and more. The goal of the accessibility widget is to make digital content more inclusive and user-friendly for individuals with diverse needs and abilities.

The website footer is the bottom section of each page, containing essential elements like navigation links, contact information, copyright details, social media links, legal notices, a site map, and additional resources. It serves to enhance user experience and provide quick access to crucial information. Again this feature is consistent across all pages of your careers hub.