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









القوالب المتاحة

Joo - Niche Multi-Purpose HTML Template مفعل
إبداعى 01
Joo - Niche Multi-Purpose HTML Template
شركات 01
View more
Joo - Niche Multi-Purpose HTML Template
مطعم برجر
View more
Joo - Niche Multi-Purpose HTML Template
حفل زفاف
View more
Joo - Niche Multi-Purpose HTML Template
شركات 02
View more
Joo - Niche Multi-Purpose HTML Template
صالون حلاقة
View more
Joo - Niche Multi-Purpose HTML Template
شركة شحن
View more
Joo - Niche Multi-Purpose HTML Template
مطعم 01
View more
Joo - Niche Multi-Purpose HTML Template
منظم حفلات
View more
Joo - Niche Multi-Purpose HTML Template
شركة شحن 02
View more
Joo - Niche Multi-Purpose HTML Template
إبداعى 02
View more
Joo - Niche Multi-Purpose HTML Template
فساتين الزفاف
View more
Joo - Niche Multi-Purpose HTML Template
تحت الإنشاء
View more
Joo - Niche Multi-Purpose HTML Template
إبداعى 03
View more