Hero

Showcase content with a full-width container

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.

I'm a hero banner!

<section class="hero has-bg-light">
  <div class="hero__content">
    <h3>I'm a hero banner!<h3>
  </div>
</section>
Copy

Sizing

The is-medium and is-large modifiers can be used to increase the padding on the top and bottom of the hero content element.

Medium

I'm a medium hero banner!

<section class="hero is-medium has-bg-light">
  <div class="hero__content">
    <h3>I'm a medium hero banner!<h3>
  </div>
</section>
Copy

Large

I'm a large hero banner!

<section class="hero is-large has-bg-light">
  <div class="hero__content">
    <h3>I'm a large hero banner!<h3>
  </div>
</section>
Copy

Full Screen

The is-full modifier will give the hero content element 100% height of the current view.

I'm a full height hero banner!

<section class="hero is-full has-bg-light">
  <div class="hero__content">
    <h3>I'm a full height hero banner!<h3>
  </div>
</section>
Copy

Extras

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.

Title

Subtitle

<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 
Copy

Variables

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