---
title: 'Body & Hero Classes'
url: 'https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space/blog/hero-classes'
markdown: 'https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space/blog/hero-classes.md'
date: '2017-08-11'
description: 'The Quark theme has the ability to allow pages to override some of the default options by letting the user set body_classes for any page. The theme will merge the combination of the defaults with any body_classes set. This allows you to easily add hero classes to give your blog post some bling. Body Classes body_classes: "header-dark header-transparent" On a particular page will ensure that page has those options enabled (assuming they are false by default). Hero Options Th'
taxonomy:
  category:
    - blog
  tag:
    - journal
    - photography
  archives_month:
    - aug_2017
  archives_year:
    - '2017'
---

# Body & Hero Classes

[ Blog ](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space/)      Body & Hero Classes    

The [Quark theme](https://getgrav.org/downloads/themes) has the ability to allow pages to override some of the default options by letting the user set `body_classes` for any page. The theme will merge the combination of the defaults with any `body_classes` set. This allows you to easily add hero classes to give your blog post some **bling**.

## Body Classes

```yaml
body_classes: "header-dark header-transparent"
```

On a particular page will ensure that page has those options enabled (assuming they are false by default).

## Hero Options

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.

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

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

- `text-light` | `text-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-fullscreen` | `hero-large` | `hero-medium` | `hero-small` | `hero-tiny` - Size of the hero block

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

 [  Previous Post ](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space/blog/daring-fireball-link)

#### Markdown Area

Some text here.

#### Popular Tags

  [photography](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//tag:photography) [journal](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//tag:journal) [city](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//tag:city) [architecture](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//tag:architecture) [link](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//tag:link) [text](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//tag:text) [mushroom](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//tag:mushroom) [night](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//tag:night) [travel](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//tag:travel)  

#### Archives

- [ 1 August 2017  ](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//archives_month:aug_2017)
- [ 3 July 2017  ](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//archives_month:jul_2017)
- [ 3 June 2017  ](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//archives_month:jun_2017)
- [ 1 May 2017  ](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//archives_month:may_2017)
- [ 1 July 2014  ](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space//archives_month:jul_2014)

#### Syndicate

 [  Atom 1.0 ](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space/.atom) [  RSS ](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space/.rss)

---

## Navigation

- Parent: [Blog](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space/index.md)
- Next: [DF Style Article Link](https://test.hibbittsdesign.org/grav-2-skeleton-open-publishing-space/blog/daring-fireball-link.md)