There are two types of hero blocks, each with a secondary variations.


  • Image by Cindy Devin

The default usage of the hero slideshow has a full-width background image and half-width, semi-transparent content block. Use #hero__slides--primary as the wrap for .slides.

Secondary Slideshow

  • Get your event permit today.

    Nam et nulla in nulla fermentum.

  • Lorem ipsum dolor sit amet.

    Nam et nulla in nulla fermentum.

  • Image by Cindy Devin

The alternative version of the hero slideshow is the same as the default with a couple differences. Add #hero__slides--secondary to the wrap. The content is full-width, and instead of direction navigation, it's using a control navgation based on the number of slides.

Hero - Background Image

Default Hero Area

Single Background Image

The default hero area is a full-width background image behind a white block of content. This block should include breadcrumbs, sub-navigation, page title, social sharing, and related content. The background image lines up with the height of the content block.

Hero - Secondary

Balboa Park Golf Course

Parks and Recreation

We are the closest golf course to downtown San Diego. Conveniently located near Route 94 and Interstate 5 freeways. Facilities include an 18-hole golf course and a 9-hole executive golf course, driving range, practice putting greens, coffee shop and half-way house.

The alternative to the main hero block contains a .hero__bg--secondary, which contains no content. A .main__message block is beneath this, containing the page title. Beyond that, a sub-navigation (if necessary), and page content flows down the rest of the page.

The main difference here is there is no height contrained for the background image. If a darker image is provided, add .main__message--transparent for readable title text.

  • Add .hero__wrap--empty to .hero__wrap if no content is provided. This will give the hero area a min-height so the image will display, and main content will push down.
  • Add .hero__bg--solid to .hero__bg if no image is provided. This will give the hero area a solid light blue background color.