--- 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 %}