Hero Banner

This is how the hero banner looks. It has a parallax effect.

The position and movement of the parallax is calculated based on the height of the hero and image and also with the height of the viewport

Hero banner

Hero banner

This is a hero banner

= ui_component('hero_banner', properties: {as_below} )
{
  title: "Hero banner",
  image_url: "http://assets.staticlp.com/slothstronaut.jpg",
  strapline: "This is a hero banner"
}

Story behind the picture

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A distinctio aperiam cumque aliquam tempore nam accusamus et voluptatibus libero reiciendis! Suscipit facere nihil obcaecati quia expedita, deleniti, sapiente odio sed! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A distinctio aperiam cumque aliquam tempore nam accusamus et voluptatibus libero reiciendis! Suscipit facere nihil obcaecati quia expedita, deleniti, sapiente odio sed! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A distinctio aperiam cumque aliquam tempore nam accusamus et voluptatibus libero reiciendis! Suscipit facere nihil obcaecati quia expedita, deleniti, sapiente odio sed! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A distinctio aperiam cumque aliquam tempore nam accusamus et voluptatibus libero reiciendis! Suscipit facere nihil obcaecati quia expedita, deleniti, sapiente odio sed!

= ui_component('hero_banner', properties: {as_below} )
{
  image_url: "http://assets.staticlp.com/slothstronaut.jpg",
  image_caption: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A distinctio aperiam cumque aliquam tempore nam accusamus et voluptatibus libero reiciendis! Suscipit facere nihil obcaecati quia expedita, deleniti, sapiente odio sed! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A distinctio aperiam cumque aliquam tempore nam accusamus et voluptatibus libero reiciendis! Suscipit facere nihil obcaecati quia expedita, deleniti, sapiente odio sed! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A distinctio aperiam cumque aliquam tempore nam accusamus et voluptatibus libero reiciendis! Suscipit facere nihil obcaecati quia expedita, deleniti, sapiente odio sed! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A distinctio aperiam cumque aliquam tempore nam accusamus et voluptatibus libero reiciendis! Suscipit facere nihil obcaecati quia expedita, deleniti, sapiente odio sed!",
  image_info: {
    attribution: "Slothy",
    attribution_url: "/styleguide/404",
    attribution_image_url: "http://assets.staticlp.com/sloth-avatar.jpg",
    title: "Slothstronaut"
  }
}