As with buttons, you can choose one of the 7 different colors:
Hero title
Hero subtitle
<section class="hero">
<div class="hero-body">
<div class="container">
<p class="title">
Hero title
</p>
<p class="subtitle">
Hero subtitle
</p>
</div>
</div>
</section>
Primary title
Primary subtitle
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<p class="title">
Primary title
</p>
<p class="subtitle">
Primary subtitle
</p>
</div>
</div>
</section>
Light bold title
Light bold subtitle
<section class="hero is-medium is-light is-bold">
<div class="hero-body">
<div class="container">
<p class="title">
Light bold title
</p>
<p class="subtitle">
Light bold subtitle
</p>
</div>
</div>
</section>
You can have even more imposing banners by using one of 3 different sizes
is-medium
is-large
is-fullheight
Large title
Large subtitle
<section class="hero is-info is-large">
<div class="hero-body">
<div class="container">
<p class="title">
Large title
</p>
<p class="subtitle">
Large subtitle
</p>
</div>
</div>
</section>
You can split the hero in 3 vertical parts:
hero
hero-head
(always at the top)hero-body
(always vertically centered)hero-foot
(always at the bottom)<section class="hero is-dark 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://yellowdi.github.io/Elenore/images/elenore-logo-white.png" alt="Logo">
</a>
<span class="navbar-burger 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-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">
<h1 class="title">
Title
</h1>
<h2 class="subtitle">
Subtitle
</h2>
</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>
<section class="hero is-fullheight">
<!-- 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://yellowdi.github.io/Elenore/images/elenore-logo.png" alt="Logo">
</a>
<span class="navbar-burger 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 has-background-norepeat has-background-center-center has-background-cover has-background-fixed" style="background-image: url('https://yellowdi.github.io/Elenore/images/wallpaper.png');">
<div class="container has-text-centered">
<img src="https://yellowdi.github.io/Elenore/images/elenore-bg.png" width="120px" alt="Logo">
</div>
</div>
</section>
This page is open source. View on GitHub