layout

The structure of your webpage

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>
              

          
      


Primary title

Primary subtitle



Primary title

Primary subtitle



Primary title

Primary subtitle



Primary title

Primary subtitle









Niche Templates

Joo - Niche Multi-Purpose HTML Template
Creative 01
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 01
View more
Joo - Niche Multi-Purpose HTML Template
Burger Restaurant
View more
Joo - Niche Multi-Purpose HTML Template
Wedding
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 02
View more
Joo - Niche Multi-Purpose HTML Template
Barber Shop
View more
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo
View more
Joo - Niche Multi-Purpose HTML Template
Restaurant 01
View more
Joo - Niche Multi-Purpose HTML Template
Wedding Planner
View more
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo 02
View more
Joo - Niche Multi-Purpose HTML Template
Creative 02
View more
Joo - Niche Multi-Purpose HTML Template active
Bridal Dresses
Joo - Niche Multi-Purpose HTML Template
Coming Soon
View more
Joo - Niche Multi-Purpose HTML Template
Creative 03
View more