Hero is a large web banner image, prominently placed in the center of a website. It presents an overview of the website's most important content


Default Hero

design system

Unites Singapore Government Digital Services around a common UI language and user experience
<section class="sgds-hero has-background-primary">
    <div class="sgds-hero-body sgds-container is-fluid">
        <div class="row is-vcentered">
            <div class="col is-8 is-offset-2 has-text-white">
                <h1 class="display"><b>title</b></h1>
                <h5 class="is-hidden-mobile">subtitle</h5>
            </div>
        </div>
    </div>
</section>

Hero with Dropdown Button
<section class="sgds-hero has-background-primary">
    <div class="sgds-hero-body sgds-container is-fluid">
        <div class="row is-vcentered">
            <div class="col is-8 is-offset-2 has-text-white has-text-centered">
                <h1 class="display"><b>title</b></h1>
                <h5 class="is-hidden-mobile margin--bottom--lg">subtitle</h5>
                <div class="sgds-dropdown is-fullwidth is-menu-centered">
                    <div class="sgds-dropdown-trigger">
                        <button class="sgds-button is-white is-medium is-outlined" aria-haspopup="true"
                                aria-controls="sgds-dropdown-menu">
                            <span><b>Click Here</b></span>
                            <span class="icon">
                        <span class="sgds-icon sgds-icon-chevron-down"></span>
                    </span>
                        </button>
                    </div>
                    <div class="sgds-dropdown-menu" role="menu">
                        <div class="sgds-dropdown-content">
                            <a href="#" class="sgds-dropdown-item">Dropdown item</a>
                            <a class="sgds-dropdown-item">Other dropdown item</a>
                            <a href="#" class="sgds-dropdown-item">Active dropdown item</a>
                            <a href="#" class="sgds-dropdown-item">Other dropdown item</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Hero with Hoverable Dropdown Button
<section class="sgds-hero has-background-primary">
    <div class="sgds-hero-body sgds-container is-fluid">
        <div class="row is-vcentered">
            <div class="col is-8 is-offset-2 has-text-white has-text-centered">
                <h1 class="display"><b>title</b></h1>
                <h5 class="is-hidden-mobile margin--bottom--lg">subtitle</h5>
                <!--Dropdown button (sgds-dropdown) must include class name  is-fullwidth, is-menu-centered & is-hoverable-->
                <div class="sgds-dropdown is-fullwidth is-menu-centered is-hoverable margin--top">
                    <div class="sgds-dropdown-trigger">
                        <!--Button (sgds-button) must include class name is-medium-->
                        <button class="sgds-button is-white is-medium is-outlined" aria-haspopup="true"
                                aria-controls="sgds-dropdown-menu">
                            <span><b>Hoverable Dropdown</b></span>
                            <span class="icon">
            <span class="sgds-icon sgds-icon-chevron-down"></span>
        </span>
                        </button>
                    </div>
                    <div class="sgds-dropdown-menu" role="menu">
                        <div class="sgds-dropdown-content">
                            <a href="#" class="sgds-dropdown-item">Dropdown item</a>
                            <a class="sgds-dropdown-item">Other dropdown item</a>
                            <a href="#" class="sgds-dropdown-item">Active dropdown item</a>
                            <a href="#" class="sgds-dropdown-item">Other dropdown item</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Hero with Search Bar

title

subtitle
<section class="sgds-hero has-background-primary">
    <div class="sgds-hero-body sgds-container is-fluid">
        <div class="row is-vcentered">
            <div class="col is-8 is-offset-2 has-text-white has-text-centered">
                <h1 class="display"><b>title</b></h1>
                <h5 class="is-hidden-mobile margin--bottom--lg">subtitle</h5>
                <div class="field has-addons">
                    <div class="control  is-expanded">
                        <input class="input" type="text" placeholder="Find a repository">
                    </div>
                    <div class="control">
                        <a class="sgds-button is-white is-outlined">
                            Search
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Guidelines

Hero should:

  • Use only relevant images
  • Make the image your centerpiece
  • Select emotionally persuasive images
  • Use only high quality images
  • Emphasise call to action buttons
  • Design for contrast

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team