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</a></li>
            <li><a href="#">Examples</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
        </div>
        <div class="top__social">
          <ul>
            <li><a href="#"><i class="fab fa-github fa-lg"></i></a></li>
            <li><a href="#"><i class="fab fa-twitter fa-lg"></i></a></li>
          </ul>
        </div>
        <div class="top__buttons">
          <a href="#" class="button is-primary">Get Started</a>
        </div>
      </div>
    </nav>
  </div>
  <div class="hero__content has-text-center">
    <div class="container is-full">
      <h3>Title</h3>
      <h4 class="subtitle">Subtitle</h4>
    </div>
  </div>
  <div class="hero__footer has-text-center">
    <p><small>CSS Orbit 2021.</small></p>
  </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.


VariableTypeDefault value
$hero-paddingpadding4rem 1.5rem
$hero-sizeslist'medium' 9rem 1.5rem,
'large' 16rem 1.5rem