- background_image: images/demo/river.jpg
  buttons:
  - label: Primary
    page: /sections
    style: secondary
  - label: Secondary
    page: /styles
    style: default
  divider_bottom: wave
  eyebrow: hero · left aligned
  heading: Photo hero with slow zoom
  kenburns: true
  scroll_cue: true
  subheading: Large height, dark overlay, scroll cue and a wave edge.
  type: hero

- align: center
  background_image: images/demo/snow.jpg
  buttons:
  - label: Get started
    page: /sections
    style: secondary
  divider_bottom: slant
  eyebrow: hero · centred
  heading: Centred headline
  height: medium
  overlay: darker
  subheading: Medium height with a slant edge.
  type: hero

- background_image: images/demo/sea.jpg
  buttons:
  - label: Learn more
    page: /sections
    style: secondary
  divider_bottom: curve
  eyebrow: hero · feature image
  feature_alt: Coffee cup
  feature_image: images/demo/coffee.jpg
  heading: Feature an image beside the headline
  height: medium
  overlay: primary
  subheading: Great for a book, product or app screenshot.
  type: hero

- height: medium
  overlay: dark
  slides:
  - buttons:
    - label: Browse
      page: /sections
      style: secondary
    eyebrow: hero-slider · slide 1
    heading: Rotating slides
    image: images/demo/forest-road.jpg
    subheading: Fades between photos with gentle parallax.
  - eyebrow: slide 2
    heading: Up to any number of slides
    image: images/demo/city.jpg
    subheading: Autoplay pauses on hover.
  - eyebrow: slide 3
    heading: Each slide has its own buttons
    image: images/demo/waterfall.jpg
  type: hero-slider

- background_image: images/demo/city-2.jpg
  divider_bottom: curve
  eyebrow: page-header
  heading: Page title bar
  overlay: primary
  subheading: The standard top of an inner page. Add a photo and an edge, or leave it plain.
  type: page-header

- eyebrow: page-header · plain
  heading: Plain page title bar
  subheading: 'No photo: a soft accent glow instead.'
  type: page-header