--- title: Hero layout: documentation hide_categories: true hide_fortyfour: true doc-tab: layout doc-subtab: hero breadcrumb: - home - documentation - layout - layout-hero meta: colors: true sizes: true variables: false ---

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:

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

{% include layout/main-close.html show_categories=true %}

Hero title

Hero subtitle

{% highlight html %}

Hero title

Hero subtitle

{% endhighlight %}
{% include elements/anchor.html name="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

{% include elements/anchor.html name="Gradients" %}
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

{% include elements/anchor.html name="Sizes" %}

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

  • medium
  • large
  • fullheight

Medium title

Medium subtitle

{% highlight html %}

Medium title

Medium subtitle

{% endhighlight %}

Large title

Large subtitle

{% highlight html %}

Large title

Large subtitle

{% endhighlight %}

Fullheight title

Fullheight subtitle

{% highlight html %}

Fullheight title

Fullheight subtitle

{% endhighlight %}
{% include elements/anchor.html name="Fullheight with navbar" %} {% include elements/new-tag.html version="0.7.2" %}

If you are using a fixed navbar, you can use the is-fullheight-with-navbar modifier on the hero for it to occupy the viewport height minus the navbar height.

{% include examples/navbar-basic.html %}

Fullheight title

Fullheight subtitle

{% highlight html %}

Fullheight title

Fullheight subtitle

{% endhighlight %}
{% include elements/anchor.html name="Fullheight hero in 3 parts" %}

To obtain a hero that will cover the whole height of the viewport, you can split it in 3 vertical parts:

  • hero
    • hero-head (always at the top)
    • hero-body (always vertically centered)
    • hero-foot (always at the bottom)
{% capture heroNavbarA %}

Title

Subtitle

{% endcapture %} {% capture heroNavbarB %}

Title

Subtitle

{% endcapture %} {% capture heroNavbarC %}

Title

Subtitle

{% endcapture %}
{% include elements/snippet.html content=heroNavbarA horizontal=true more=true %} {% include elements/snippet.html content=heroNavbarB horizontal=true more=true %} {% include elements/snippet.html content=heroNavbarC horizontal=true more=true %}
{% include layout/main-open.html %} {% include elements/variables.html type='component' hide_content=true %}