Overview
Heroes are large web banners, usually placed in the centre of a page. It presents an overview of the page's most important content.
Types
1) 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">
<div class="row is-vcentered has-text-centered">
<div class="col is-8 is-offset-2 has-text-white">
<h1 class="display"><b>design system</b></h1>
<h5 class="is-hidden-mobile">Unites Singapore Government Digital Services around a common UI language and user experience</h5>
</div>
</div>
</div>
</section>2) With Dropdown Button
title
subtitle
<section class="sgds-hero has-background-primary">
<div class="sgds-hero-body">
<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">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>3) With Hoverable Dropdown Button
title
subtitle
<section class="sgds-hero has-background-primary">
<div class="sgds-hero-body">
<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">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>4) With Search Bar
<section class="sgds-hero has-background-primary">
<div class="sgds-hero-body">
<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">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>5) With Highlight card
design system
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, nulla.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, nulla.
<section class="sgds-hero has-background-primary" style="height: 500px;">
<div class="sgds-hero-body">
<div class="row is-vcentered has-text-centered">
<div class="col is-8 is-offset-2 has-text-white">
<h1 class="display"><b>design system</b></h1>
</div>
</div>
</div>
</section>
<div class="sgds-container" style="margin-top:-130px;">
<div class="row">
<div class="col is-5 is-offset-1">
<div class="sgds-card sgds-card-variant-highlight">
<div class="sgds-card-image">
<!-- You can change the css variable value for var(--sgds-card-variant-highlight-margin-top). The number should be half of the total height of the card image -->
<img src="https://via.placeholder.com/160x160" alt="">
</div>
<div class="sgds-card-content">
<h3>Title</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sequi, nulla.
</p>
</div>
<div class="sgds-card-footer">
<a href="#!" class="sgds-card-footer-item">Read our documentation</a>
</div>
</div>
</div>
<div class="col is-5">
<div class="sgds-card sgds-card-variant-highlight">
<div class="sgds-card-image">
<!-- You can change the css variable value for var(--sgds-card-variant-highlight-margin-top). The number should be half of the total height of the card image -->
<img src="https://via.placeholder.com/160x160" alt="">
</div>
<div class="sgds-card-content">
<h3>Title</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sequi, nulla.
</p>
</div>
<div class="sgds-card-footer">
<a href="#!" class="sgds-card-footer-item">Read our documentation</a>
</div>
</div>
</div>
</div>
</div>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.
- Be designed for contrast.
Can't find a component?
Let us know what you need and we’ll be happy to look into it