Hero

Last updates - 19 Dec 2018

• Code snippets updated
• Use .has-background-*color* helper class

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

design system

Unites Singapore Government Digital Services around a common UI language and user experience

Usage

<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>

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.

Tell us more