Page Hero
A page can have a Bulma hero at the top of the page. This allows you to display the title and subtitle, as well as a background image.
Background Image
Heros can display a background image if you provide a hero_image: /path/to/image.jpg setting in your page front matter.
layout: page
title: My page
hero_image: /path/to/image.jpg
To set a default background image for all heros, you can set a default value in your site’s _config.yml.
Hero Height
You can set the height of the hero by providing a Bulma hero height class in your front matter, such as hero_height: is-fullwidth. If you do not provide this, it will revert to is-medium.
layout: page
title: My page
hero_height: is-fullwidth
Call to action
If you would like to add a call to action button in the hero then add hero_link and hero_link_text to the page’s front matter.
layout: page
title: My page
hero_link: /my-page/
hero_link_text: The Link Text
Hiding the Hero
If you would like to hide the hero on the page, you can set hide_hero: true in the page’s front matter.
layout: page
title: My page
hide_hero: true
Dark overlay
If you would like to darken the hero so the title stands out more over a light image, you can set hero_darken: true in the page’s front matter.
layout: page
title: My page
hero_image: /path/to/img.jpg
hero_darken: true
You can overwrite the default hero background colour by setting the $hero-darken sass variable.