/
- Compound
- Accordion
- Content
- BenefitsSection
- Billboard
- ImageBackgroundCallToAction
- Primitives
- Button
- LegacyButton
- Color
- Columns
- GridContainer
- Popover
- Stack
- StyledLink
- Typography
- Hero
- CenteredHero
- GifBackgroundHero
- SimpleHero
- SplitHero
- StandardHero
- VideoBackgroundHero
- Dialog
- EmailSignupDialog
- Promo
- OfferBox
- SimpleBanner
- Merchandise
- ProductCard
- Shop
- ShopSection
- ShopSectionNew
- App Portrayal
- SleepRoutineTabsSection
- Interactions
- Toast
- Docs
- Working with DatoCMS
- Magic Link Authentication Flow
- Comprehensive Next.js Authentication Flow
<SimpleHero> Component
Shop all Hatch sleep products
Promo example
Code Editor
<SimpleHerolabelText="Friends & Family Sale"heading="15% off sitewide"text={<p><em>Valid now thru Oct 26</em></p>}imageUrl="https://www.datocms-assets.com/98401/1681256470-gradient.jpg"/>
Align content left
Code Editor
<SimpleHerolabelText="Friends & Family Sale"heading="15% off sitewide"contentAlign="left"text={<p><em>Valid now thru Oct 26</em></p>}imageUrl="https://www.datocms-assets.com/98401/1681256470-gradient.jpg"/>
With theme 'light'
Code Editor
<SimpleHerotheme="light"labelText="Friends & Family Sale"heading="15% off sitewide"text={<p><em>Valid now thru Oct 26</em></p>}imageUrl="https://www.datocms-assets.com/98401/1681256470-gradient.jpg"/>