The Grav CMS default theme has the ability to allow pages to override some of the default options by letting the user set custom body classes for any page. The theme will merge these new classes with the defaults that have been set. This allows you to...

How to use hero classes in Grav
| Adrian Coroi

The Grav CMS default theme has the ability to allow pages to override some of the default options by letting the user set custom body classes for any page. The theme will merge these new classes with the defaults that have been set. This allows you to easily add hero classes to give your blog post some polish.

Body Classes

body_classes: "header-dark header-transparent"

On a particular page a line defining one ore more body_classes will ensure that page has the body class option enabled (assuming it is disabled by default).

Hero Classes

The hero template allows some options to be set in the page frontmatter. This is used by the modular hero as well as the blog and item templates to provide a more dynamic header.

hero_classes: text-light title-h1h2 parallax overlay-dark-gradient hero-large
img_main: road.jpg
hero_align: center

The hero_classes option allows a variety of hero classes to be set dynamically, these include:

  • text-lighttext-dark - Controls if the text should be light or dark depending on the content
  • title-h1h2 - Enforced a close matched h1/h2 title pairing
  • parallax - Enables a CSS-powered parallax effect
  • overlay-dark-gradient - Displays a transparent gradient which further darkens the underlying image
  • overlay-light-gradient - Displays a transparent gradient which further lightens the underlying image
  • overlay-dark - Displays a solid transparent overlay which further darkens the underlying image
  • overlay-light - Displays a solid transparent overlay which further darkens the underlying image
  • hero-fullscreenhero-largehero-mediumhero-smallhero-tiny - Size of the hero block

The img_main should point to an image file in the current page folder.

Next