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

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 fullheight hero to work, you will also need a hero-head and a hero-foot.

{% capture hero_example %}

Hero title

Hero subtitle

{% endcapture %} {% include elements/snippet.html content=hero_example horizontal=true fullwidth=true %} {% include elements/anchor.html name="Colors" %}

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

{% for color in site.data.colors.justColors %} {% capture foobar %}

{{ color | capitalize }} hero

{{ color | capitalize }} subtitle

{% endcapture %} {% include elements/snippet.html content=foobar horizontal=true fullwidth=true %} {% endfor %} {% include elements/anchor.html name="Sizes" %}

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

is-small
is-medium
is-large
is-halfheight
is-fullheight

{% capture small_hero %}

Small hero

Small subtitle

{% endcapture %} {% include elements/snippet.html content=small_hero horizontal=true fullwidth=true %} {% capture medium_hero %}

Medium hero

Medium subtitle

{% endcapture %} {% include elements/snippet.html content=medium_hero horizontal=true fullwidth=true %} {% capture large_hero %}

Large hero

Large subtitle

{% endcapture %} {% include elements/snippet.html content=large_hero horizontal=true fullwidth=true %}

{% capture halfheight_example %}

Half height hero

Half height subtitle

{% endcapture %} {% include elements/snippet.html content=halfheight_example horizontal=true fullwidth=true %}

{% capture fullheight_example %}

Fullheight hero

Fullheight subtitle

{% endcapture %} {% include elements/snippet.html content=fullheight_example horizontal=true fullwidth=true %} {% include elements/anchor.html name="Fullheight with navbar" %}

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.

{% capture fullheight_with_navbar_example %} {% include examples/navbar-basic.html %} {% endcapture %} {% include elements/snippet.html content=fullheight_with_navbar_example horizontal=true fullwidth=true %} {% 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 fullwidth=true more=true %} {% include elements/snippet.html content=heroNavbarB horizontal=true fullwidth=true more=true %} {% include elements/snippet.html content=heroNavbarC horizontal=true fullwidth=true more=true %} {% include components/variables.html type='component' hide_content=true %}