hero

The hero component allows you to add a full width banner to your webpage, which can optionally cover the full height of the page as well.

The basic requirement of this component are:

hero as the main container
- hero-body as a direct child, in which you can put all your content

For the full height hero to work, you will also need a hero-head and a hero-foot.

Hero title

Hero subtitle

                    

                        
                        <section class="hero">
                          <div class="hero-body">
                            <div class="container">
                              <h1 class="title">
                                Hero title
                              </h1>
                              <h2 class="subtitle">
                                Hero subtitle
                              </h2>
                            </div>
                          </div>
                        </section>

Colors

As with buttons, you can choose one of the 7 different colors:

Primary title

Primary subtitle

          

              
             <section class="hero is-primary">
              <div class="hero-body">
                <div class="container">
                  <h1 class="title">
                    Primary title
                  </h1>
                  <h2 class="subtitle">
                    Primary subtitle
                  </h2>
                </div>
              </div>
            </section>

layout

The structure of your webpage

hero

Colors

Primary title

Primary subtitle

Primary title

Primary subtitle

Primary title

Primary subtitle

Primary title

Primary subtitle

Primary title

Primary subtitle

Creative 01

Corporate 01

Burger Restaurant

Wedding

Corporate 02

Barber Shop

Logistics Cargo

Restaurant 01

Wedding Planner

Logistics Cargo 02

Creative 02

Bridal Dresses

Coming Soon

Creative 03