Hero

An imposing hero banner to showcase something

Sizes

You can have even more imposing banners by using one of 7 different sizes:

  • is-tiny
  • is-small
  • is-medium
  • is-large
  • is-halfheight
  • is-fullheight
  • is-jumbo

Example Tiny

Tiny hero

Tiny subtitle

HTML 

<section class="hero is-tiny is-success">
                                <div class="hero-body">
                                <p class="title">
                                    Tiny hero
                                </p>
                                <p class="subtitle">
                                    Tiny subtitle
                                </p>
                                </div>
                                </section>

Example Small

Small hero

Small subtitle

HTML 

<section class="hero is-small is-warning">
                                <div class="hero-body">
                                <p class="title">
                                    Small hero
                                </p>
                                <p class="subtitle">
                                    Small subtitle
                                </p>
                                </div>
                                </section>

Example Medium

Medium hero

Medium subtitle

HTML 

<section class="hero is-medium is-danger">
                                <div class="hero-body">
                                <p class="title">
                                    Medium hero
                                </p>
                                <p class="subtitle">
                                    Medium subtitle
                                </p>
                                </div>
                                </section>

Example Large

Large hero

Large subtitle

HTML 

<section class="hero is-large is-info">
                                <div class="hero-body">
                                <p class="title">
                                    Large hero
                                </p>
                                <p class="subtitle">
                                    Large subtitle
                                </p>
                                </div>
                                </section>

Example Half Height

Half Height hero

Half Height subtitle

HTML 

<section class="hero is-halfheight is-link">
                                <div class="hero-body">
                                <p class="title">
                                    Half Height hero
                                </p>
                                <p class="subtitle">
                                    Half Height subtitle
                                </p>
                                </div>
                                </section>

Example Full Height

Full Height hero

Full Height subtitle

HTML 

<section class="hero is-fullheight is-primary">
                                <div class="hero-body">
                                <p class="title">
                                    Full Height hero
                                </p>
                                <p class="subtitle">
                                    Full Height subtitle
                                </p>
                                </div>
                                </section>

Example Jumbo

Jumbo hero

Jumbo subtitle

HTML 

<section class="hero is-jumbo">
                                <div class="hero-body">
                                <p class="title">
                                    Jumbo hero
                                </p>
                                <p class="subtitle">
                                    Jumbo subtitle
                                </p>
                                </div>
                                </section>