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.

<section class="hero">
  <div class="hero__content has-bg-light">
    <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

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

Large

<section class="hero is-large">
  <div class="hero__content has-bg-light">
    <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.

<section class="hero is-full">
  <div class="hero__content has-bg-light">
    <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.

<section class="hero is-full">
  <div class="hero__header has-bg-light">
    <nav class="top">
      <div class="container is-full">
        <div class="top__brand">
          <img width="60px" src="https://orbitcss.com/img/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 has-bg-light">
    <div class="container is-full">
      <h3>Title</h3>
      <h4 class="subtitle">Subtitle</h4>
    </div>
  </div>
  <div class="hero__footer has-text-center has-bg-light">
    <p><small>CSS Orbit 2021.</small></p>
  </div>
</section>
</> Show code
Copy

CSS variables

CSS variables are set on the top-level hero block.

.hero {
  --padding: 4rem 1.5rem;
  --background-color: var(--color-white);
  --font-color: var(--color-black);
}
Copy

If your hero block contains multiple custom elements, you can override the background and font color at the element level.

.hero__content {
  --background-color: var(--color-light);
  --font-color: var(--color-black);
}

.hero__footer {
  --background-color: var(--color-black);
  --font-color: var(--color-white);
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.