====== Main Header Element / Hero ======


===== About =====
The ''main header'' is a [[docs:theme:element:element|template element]] that is located on top of your [[main|content (main element)]].

It's also known as a [[:docs:styling:hero|hero]] header in design.

{{:docs:theme:element:layout_element.svg?0x250|}}

===== Design and Component =====
It is generally shown prominently to grab the attention of your reader.

You will find in this area:
  * the [[:docs:page:title|page title]]
  * the [[:docs:page:lead|lead]]
  * a [[:docs:page:featured-image|featured image]]
  * the [[:docs:navigation:breadcrumb|breadcrumb]]


===== How to change it? =====

By default, the ''main header'' design is implemented by the [[:docs:theme:template:template|template]].

  * Designers can [[:howto:theme-creation|create a custom theme]] and apply complex HTML logic.
  * Power users can overwrite it by creating a [[:docs:theme:slot:main_header_slot|main header slot]].

Note that not all templates support a ''main header''. 

By default, all templates that are **not** for a [[:docs:theme:template:index|index page]] such as the [[:docs:theme:template:index|index template]] should support it. You should refer to the documentation of the template to confirm it.