/
- 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
<GifBackgroundHero> Component
Code Editor
<GifBackgroundHerocta={{ href: '/shop-all', text: 'Shop Now' }}heading="15% off sitewide"text="This is some awesome text"labelText="FRIENDS & FAMILY SALE"desktopImage={{url: 'https://www.datocms-assets.com/98401/1681256454-option-d-horz-gif-01.gif',alt: 'desktop image',}}mobileImage={{url: 'https://www.datocms-assets.com/98401/1681256447-option-d-vert-gif-01.gif',alt: 'mobile image',}}/>
With secondaryCta
Code Editor
<GifBackgroundHerocta={{ href: '/shop-all', text: 'Shop Now' }}secondaryCta={{ href: '/shop-all', text: 'Shop Now' }}heading="15% off sitewide"text="This is some awesome text"labelText="FRIENDS & FAMILY SALE"desktopImage={{url: 'https://www.datocms-assets.com/98401/1681256454-option-d-horz-gif-01.gif',alt: 'desktop image',}}mobileImage={{url: 'https://www.datocms-assets.com/98401/1681256447-option-d-vert-gif-01.gif',alt: 'mobile image',}}/>