> For the complete documentation index, see [llms.txt](https://v2.isomer.gov.sg/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2.isomer.gov.sg/configurations/homepage/hero-banner.md).

# Hero Banner

![Screenshot of the hero banner on the homepage with button and 3 key highlights](/files/-MJZoQNPI4fwP9XoJP3u)

The hero banner is the main banner on the home page. It includes a background, a call to action button or dropdown, as well as up to 4 key highlights (optional) that you can use to highlight pages and sites of importance.

**Background photo**

The background photo should only contain scenery, people, or a pattern. It should **not** contain any text as the image will automatically be resized to fit different devices, and text included may end up being cut off or blocked by other components on the page, drastically affecting the user experience on your site. 

Furthermore, text in images cannot be read by screen readers used by people with visual impairments, affecting the accessibility of your site.

The hero banner must be the first section in the page. Only 1 hero banner is allowed on the home page.

**Configuration options**

* `title`: the title that will be displayed in large font in the middle of the banner
* `subtitle`: the subtitle that will be displayed in smaller font in the middle of the banner. *Optional*
* `background`: the path to the background image in the hero banner. We recommend a resolution of **1920x720 pixels**
* `button`: the text in the central call-to-action button in the hero banner. *Optional* if dropdown menu is present
* `url`: the URL linked to by the call-to-action button. *Optional* if dropdown menu is present
* `dropdown`: a dropdown menu with sublinks that *replaces* the call-to-action button. *Optional*. The options available for the dropdown menu are:
  * `title`: the title of the dropdown menu, visible when the menu has not been clicked
  * `options`: a list of `title` and `url` that form the options under the dropdown menu
* `key_highlights`: a list of up to 4 links placed at the bottom of the hero banner that you can use to highlight pages of importance. *Optional*. The options available for each key highlight are:
  * `title`: the title of the key highlight
  * `description`: the subtitle/description of the key highlight. *Optional*
  * `url`: the URL the key highlight links to *Optional*

Sample configuration that includes a button without key highlights:

```
- hero:
    title: Ministry of ABC
    subtitle: We provide Singaporeans with XYZ services
    background: /images/banner.png
    url: /contact-us/
    button: Contact
```

Sample configuration that uses a dropdown menu instead of a button, and also includes 3 key highlights:

```
- hero:
    title: Ministry of ABC
    subtitle: We provide Singaporeans with XYZ services
    background: /images/banner.png
    dropdown:
        title: I want to...
        options:
        - title: Sign up for EFG
          url: /signup/
        - title: Learn more about ABC
          url: /learn-more/
    key_highlights:
        - title: ABC services
          description: Find out what ABC can do for you
          url: /services/
        - title: Our Annual Reports
          url: /annual-reports/
        - title: Join ABC
          description: Unleash your passion and be rewarded with a fulfilling career!
          url: /careers/
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://v2.isomer.gov.sg/configurations/homepage/hero-banner.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.