--- title: Hero layout: documentation doc-tab: layout doc-subtab: hero --- {% include subnav-layout.html %}

Hero

An imposing hero banner to showcase something

Hero title

Hero subtitle

{% highlight html %}

Hero title

Hero subtitle

{% endhighlight %}

Colors

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

Primary title

Primary subtitle

{% highlight html %}

Primary title

Primary subtitle

{% endhighlight %}

Info title

Info subtitle

Success title

Success subtitle

Warning title

Warning subtitle

Danger title

Danger subtitle

Light title

Light subtitle

Dark title

Dark subtitle

Gradients Experimental

By adding the is-bold modifier, you can generate a subtle gradient

Primary bold title

Primary bold subtitle

{% highlight html %}

Primary bold title

Primary bold subtitle

{% endhighlight %}

Info bold title

Info bold subtitle

Success bold title

Success bold subtitle

Warning bold title

Warning bold subtitle

Danger bold title

Danger bold subtitle

Light bold title

Light bold subtitle

Dark bold title

Dark bold subtitle

Sizes

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

Medium title

Medium subtitle

{% highlight html %}

Medium title

Medium subtitle

{% endhighlight %}

Large title

Large subtitle

{% highlight html %}

Large title

Large subtitle

{% endhighlight %}

Full Height title

Full Height subtitle

{% highlight html %}

Full Height title

Full Height subtitle

{% endhighlight %}

Full height hero

And vertically centered

You can split the hero in 3 vertical parts:

  • hero
    • hero-head (always at the top)
    • hero-body (always vertically centered)
    • hero-foot (always at the bottom)

Title

Subtitle

{% highlight html %}

Title

Subtitle

{% endhighlight %}

Title

Subtitle

{% highlight html %}

Title

Subtitle

{% endhighlight %}

Title

Subtitle

{% highlight html %}

Title

Subtitle

{% endhighlight %}