<!-- Hero part -->
<rs-hero header="Taxi Sift" bg-class="-bg-taxi -effect-darken" scroll-target="#scroll-anchor" sticky-header=".content">
    <code class="fade-in">£17.50</code>
    <p class="fade-in delay">Your taxi bills from last week</p>
</rs-hero>

<!-- Content part -->
<div class="content" id="scroll-anchor">
  <div class="content__container--expand">
    <h2>Item in <strong>content</strong> unit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>
</div>

<div class="content" id="data">
  <div class="content__container--expand">
    <h2>Another item</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>
</div>

<div class="content" id="data">
  <div class="content__container--expand">
    <h2>Say something</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>
</div>

.-bg-taxi {
  background-image: url('//static.redsift.io/assets/images/taxi-1.jpg');
  background-color: rgb(42, 24, 22);
}

.hero-sticky-header--active {
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.15);
  background-image: url('//static.redsift.io/assets/images/taxi-1.jpg');
}

.content__container--expand {
  padding: 1em;
}

// RedsiftUI already registers the 'rs-hero' element automatically, no additional Javascript is necessary here.