Hero

Basics#

The Rocket CSS hero component is used to create useful introductory page banners used for highlighting important information. You can extend the hero component if required and utilise the Rocket CSS grid system as well. To get started, simply add a .hero wrapper and a .hero-body child element.

By default our hero component doesn't come with much styling to child content. This makes it great for styling with your own classes.

You can utilise our colour classes and spacing classes for child elements.

  <div class="hero">
    <div class="hero-body">
      ...
    </div>
  </div>

Sizes#

Rocket CSS comes with a few powerful helper classes for changing the size of your hero component. Simply add one of the following Rocket CSS classes to a .hero component:

• - .hero-small for a small hero component.
• - .hero-large for a large hero component.
• - .hero-extra-large for a extra hero component.

Small#

Here's a small hero

  <div class="hero hero-small">
    <div class="hero-body">
      ...
    </div>
  </div>

Large#

Here's a large hero

  <div class="hero hero-large">
    <div class="hero-body">
      ...
    </div>
  </div>

Extra Large#

Here's a extra large hero

  <div class="hero hero-extra-large">
    <div class="hero-body">
      ...
    </div>
  </div>