The hero component allows you to add a full width banner to your webpage, which can optionally cover the full height of the page as well.
The basic requirement of this component are:
hero
as the main container
hero-body
as a direct child, in which you can put all your content
For the fullheight hero to work, you will also need a hero-head
and a hero-foot
.
HTML
<section class= "hero" >
<div class= "hero-body" >
<p class= "title" >
Hero title
</p>
<p class= "subtitle" >
Hero subtitle
</p>
</div>
</section>
Colors
#
As with buttons, you can choose one of the 8 different colors :
Example
Primary hero
Primary subtitle
HTML
<section class= "hero is-primary" >
<div class= "hero-body" >
<p class= "title" >
Primary hero
</p>
<p class= "subtitle" >
Primary subtitle
</p>
</div>
</section>
HTML
<section class= "hero is-link" >
<div class= "hero-body" >
<p class= "title" >
Link hero
</p>
<p class= "subtitle" >
Link subtitle
</p>
</div>
</section>
HTML
<section class= "hero is-info" >
<div class= "hero-body" >
<p class= "title" >
Info hero
</p>
<p class= "subtitle" >
Info subtitle
</p>
</div>
</section>
Example
Success hero
Success subtitle
HTML
<section class= "hero is-success" >
<div class= "hero-body" >
<p class= "title" >
Success hero
</p>
<p class= "subtitle" >
Success subtitle
</p>
</div>
</section>
Example
Warning hero
Warning subtitle
HTML
<section class= "hero is-warning" >
<div class= "hero-body" >
<p class= "title" >
Warning hero
</p>
<p class= "subtitle" >
Warning subtitle
</p>
</div>
</section>
Example
Danger hero
Danger subtitle
HTML
<section class= "hero is-danger" >
<div class= "hero-body" >
<p class= "title" >
Danger hero
</p>
<p class= "subtitle" >
Danger subtitle
</p>
</div>
</section>
Sizes
#
You can have even more imposing banners by using one of 5 different sizes :
is-small
is-medium
is-large
is-halfheight
is-fullheight
Example
Small hero
Small subtitle
HTML
<section class= "hero is-small is-primary" >
<div class= "hero-body" >
<p class= "title" >
Small hero
</p>
<p class= "subtitle" >
Small subtitle
</p>
</div>
</section>
Example
Medium hero
Medium subtitle
HTML
<section class= "hero is-medium is-link" >
<div class= "hero-body" >
<p class= "title" >
Medium hero
</p>
<p class= "subtitle" >
Medium subtitle
</p>
</div>
</section>
Example
Large hero
Large subtitle
HTML
<section class= "hero is-large is-info" >
<div class= "hero-body" >
<p class= "title" >
Large hero
</p>
<p class= "subtitle" >
Large subtitle
</p>
</div>
</section>
Example
Half height hero
Half height subtitle
HTML
<section class= "hero is-success is-halfheight" >
<div class= "hero-body" >
<div class= "" >
<p class= "title" >
Half height hero
</p>
<p class= "subtitle" >
Half height subtitle
</p>
</div>
</div>
</section>
Example
Fullheight hero
Fullheight subtitle
HTML
<section class= "hero is-danger is-fullheight" >
<div class= "hero-body" >
<div class= "" >
<p class= "title" >
Fullheight hero
</p>
<p class= "subtitle" >
Fullheight subtitle
</p>
</div>
</div>
</section>
Fullheight with navbar
#
If you are using a fixed navbar , you can use the is-fullheight-with-navbar
modifier on the hero for it to occupy the viewport height minus the navbar height.
Example
Fullheight hero with navbar
HTML
<nav class= "navbar" >
<div class= "container" >
<div id= "navMenu" class= "navbar-menu" >
<div class= "navbar-start" >
<a class= "navbar-item" >
Home
</a>
<a class= "navbar-item" >
Documentation
</a>
</div>
<div class= "navbar-end" >
<div class= "navbar-item" >
<div class= "buttons" >
<a class= "button is-dark" > Github</a>
<a class= "button is-link" > Download</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<section class= "hero is-link is-fullheight-with-navbar" >
<div class= "hero-body" >
<p class= "title" >
Fullheight hero with navbar
</p>
</div>
</section>
Fullheight hero in 3 parts
#
To obtain a hero that will cover the whole height of the viewport, you can split it in 3 vertical parts :
hero
hero-head
(always at the top)
hero-body
(always vertically centered)
hero-foot
(always at the bottom)
HTML
<section class= "hero is-primary is-medium" >
<!-- Hero head: will stick at the top -->
<div class= "hero-head" >
<nav class= "navbar" >
<div class= "container" >
<div class= "navbar-brand" >
<a class= "navbar-item" >
<img src= "https://versions.bulma.io/0.9.3/images/bulma-type-white.png" alt= "Logo" >
</a>
<span class= "navbar-burger" data-target= "navbarMenuHeroA" >
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id= "navbarMenuHeroA" class= "navbar-menu" >
<div class= "navbar-end" >
<a class= "navbar-item is-active" >
Home
</a>
<a class= "navbar-item" >
Examples
</a>
<a class= "navbar-item" >
Documentation
</a>
<span class= "navbar-item" >
<a class= "button is-primary is-inverted" >
<span class= "icon" >
<i class= "fab fa-github" ></i>
</span>
<span> Download</span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
<!-- Hero content: will be in the middle -->
<div class= "hero-body" >
<div class= "container has-text-centered" >
<p class= "title" >
Title
</p>
<p class= "subtitle" >
Subtitle
</p>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class= "hero-foot" >
<nav class= "tabs" >
<div class= "container" >
<ul>
<li class= "is-active" ><a> Overview</a></li>
<li><a> Modifiers</a></li>
<li><a> Grid</a></li>
<li><a> Elements</a></li>
<li><a> Components</a></li>
<li><a> Layout</a></li>
</ul>
</div>
</nav>
</div>
</section>
HTML
<section class= "hero is-info is-large" >
<div class= "hero-head" >
<nav class= "navbar" >
<div class= "container" >
<div class= "navbar-brand" >
<a class= "navbar-item" >
<img src= "https://versions.bulma.io/0.9.3/images/bulma-type-white.png" alt= "Logo" >
</a>
<span class= "navbar-burger" data-target= "navbarMenuHeroB" >
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id= "navbarMenuHeroB" class= "navbar-menu" >
<div class= "navbar-end" >
<a class= "navbar-item is-active" >
Home
</a>
<a class= "navbar-item" >
Examples
</a>
<a class= "navbar-item" >
Documentation
</a>
<span class= "navbar-item" >
<a class= "button is-info is-inverted" >
<span class= "icon" >
<i class= "fab fa-github" ></i>
</span>
<span> Download</span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
<div class= "hero-body" >
<div class= "container has-text-centered" >
<p class= "title" >
Title
</p>
<p class= "subtitle" >
Subtitle
</p>
</div>
</div>
<div class= "hero-foot" >
<nav class= "tabs is-boxed is-fullwidth" >
<div class= "container" >
<ul>
<li class= "is-active" >
<a> Overview</a>
</li>
<li>
<a> Modifiers</a>
</li>
<li>
<a> Grid</a>
</li>
<li>
<a> Elements</a>
</li>
<li>
<a> Components</a>
</li>
<li>
<a> Layout</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
HTML
<section class= "hero is-success is-fullheight" >
<!-- Hero head: will stick at the top -->
<div class= "hero-head" >
<header class= "navbar" >
<div class= "container" >
<div class= "navbar-brand" >
<a class= "navbar-item" >
<img src= "https://versions.bulma.io/0.9.3/images/bulma-type-white.png" alt= "Logo" >
</a>
<span class= "navbar-burger" data-target= "navbarMenuHeroC" >
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id= "navbarMenuHeroC" class= "navbar-menu" >
<div class= "navbar-end" >
<a class= "navbar-item is-active" >
Home
</a>
<a class= "navbar-item" >
Examples
</a>
<a class= "navbar-item" >
Documentation
</a>
<span class= "navbar-item" >
<a class= "button is-success is-inverted" >
<span class= "icon" >
<i class= "fab fa-github" ></i>
</span>
<span> Download</span>
</a>
</span>
</div>
</div>
</div>
</header>
</div>
<!-- Hero content: will be in the middle -->
<div class= "hero-body" >
<div class= "container has-text-centered" >
<p class= "title" >
Title
</p>
<p class= "subtitle" >
Subtitle
</p>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class= "hero-foot" >
<nav class= "tabs is-boxed is-fullwidth" >
<div class= "container" >
<ul>
<li class= "is-active" ><a> Overview</a></li>
<li><a> Modifiers</a></li>
<li><a> Grid</a></li>
<li><a> Elements</a></li>
<li><a> Components</a></li>
<li><a> Layout</a></li>
</ul>
</div>
</nav>
</div>
</section>
Variables
#
Name
Type
Value
Computed Value
Computed Type
$ hero-body-padding-tablet
size
$ hero-body-padding-medium
size