The hero block is generally used for displaying full-width content such as a hero banner and makes a great alternative to using sections. A hero
block always consists of at least one hero__content
element.
<section class="hero has-bg-light">
<div class="hero__content">
<h3>I'm a hero banner!<h3>
</div>
</section>
The is-medium
and is-large
modifiers can be used to increase the padding on the top and bottom of the hero content element.
<section class="hero is-medium has-bg-light">
<div class="hero__content">
<h3>I'm a medium hero banner!<h3>
</div>
</section>
<section class="hero is-large has-bg-light">
<div class="hero__content">
<h3>I'm a large hero banner!<h3>
</div>
</section>
The is-full
modifier will give the hero content element 100% height of the current view.
<section class="hero is-full has-bg-light">
<div class="hero__content">
<h3>I'm a full height hero banner!<h3>
</div>
</section>
You can extend the hero block by adding a header and footer. To see this in action, you can check out the example for a Full page cover.
<section class="hero is-full has-bg-light">
<div class="hero__header">
<nav class="top">
<div class="container is-full">
<div class="top__brand">
<img width="60px" src="orbitcss_logo.png">
</div>
<div class="top__links is-end">
<ul>
<li><a href="/documentation">Documentation</a></li>
<li><a href="/examples">Examples</a></li>
<li>Blog</li>
</ul>
</div>
<div class="top__social top__social--left-m">
<ul>
<li><i class="fab fa-github fa-lg"></i></li>
<li><i class="fab fa-twitter fa-lg is-twitter"></i></li>
<li><a href="#" class="button is-primary">Get Started</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="hero__content">
<h3>I'm a full height hero banner!<h3>
</div>
<div class="hero__footer">
<p><small>CSS Orbit 2021.</p></small>
</div>
</section>
</> Show code The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
| Variable | Type | Default Value |
|---|---|---|
| $hero-padding | padding | 4rem 1.5rem |
| $hero-sizes | list | 'medium' 9rem 1.5rem, 'large' 16rem 1.5rem |