Hatch Logo
/

<SplitHero> Component

Meet the new Rest 2nd gen

Everything you love about Rest, with expert-curated sleep content for smoother wind downs, a dimmable clock, and even more for dreamy sleep

Shop Rest 2nd gen
Meet the new Rest 2nd gen

With custom backgroundColor

Share
Code Editor


<SplitHero

  backgroundColor="#CBF0F2"

  theme="light"

  heading="Meet the new Rest 2nd gen"

  text="Everything you love about Rest, with expert-curated sleep content for smoother wind downs, a dimmable clock, and even more for dreamy sleep"

  image={{

    alt: 'Meet the new Rest 2nd gen',

    url: 'https://www.datocms-assets.com/98401/1706810441-meetthenewrest.png',

  }}

  cta={{ href: '/rest-second-gen', text: 'Shop Rest 2nd gen' }}

/>

With secondaryCta

Share
Code Editor


<SplitHero

  backgroundColor="#CBF0F2"

  theme="light"

  heading="Meet the new Rest 2nd gen"

  text="Everything you love about Rest, with expert-curated sleep content for smoother wind downs, a dimmable clock, and even more for dreamy sleep"

  image={{

    alt: 'Meet the new Rest 2nd gen',

    url: 'https://www.datocms-assets.com/98401/1706810441-meetthenewrest.png',

  }}

  cta={{ href: '/rest-second-gen', text: 'Shop Rest 2nd gen' }}

  secondaryCta={{ href: '/shop-all', text: 'Shop All' }}

/>

With eyebrow, via labelText

Share
Code Editor


<SplitHero

  backgroundColor="var(--hdc-navy)"

  labelText="OUR LATEST & GREATEST"

  heading="Meet the new Rest 2nd gen"

  text="Everything you love about Rest, with expert-curated sleep content for smoother wind downs, a dimmable clock, and even more for dreamy sleep"

  image={{

    alt: 'Meet the new Rest 2nd gen',

    url: 'https://www.datocms-assets.com/98401/1706810441-meetthenewrest.png',

  }}

  cta={{ href: '/rest-second-gen', text: 'Shop Rest 2nd gen' }}

/>