hero
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 full height hero to work, you will also need a hero-head
and a hero-foot
.
Hero title
Hero subtitle
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title">
Hero title
</h1>
<h2 class="subtitle">
Hero subtitle
</h2>
</div>
</div>
</section>
Colors
As with buttons, you can choose one of the 7 different colors:
Primary title
Primary subtitle
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Primary title
</h1>
<h2 class="subtitle">
Primary subtitle
</h2>
</div>
</div>
</section>
Primary title
Primary subtitle
Primary title
Primary subtitle
Primary title
Primary subtitle
Primary title
Primary subtitle
Niche Templates