/
- 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
<StyledLink> Component
Primary
Code Editor
<StyledLink href="#shop" variant="primary" text="Hello world" />
Secondary
Code Editor
<StyledLink href="#shop" variant="secondary" text="Hello world" />
Colors
Code Editor
<Columns align={{ x: 'start' }}><StyledLink href="#shop" variant="primary" text="Hello world" themeColor="navy" /><StyledLink href="#shop" variant="secondary" text="Hello world" themeColor="navy" /></Columns>
Layout considerations
By default <StyledLink /> will span the full width of their container
Code Editor
<Stack ><StyledLink href="#shop" variant="primary" text="Hello world" /><StyledLink href="#shop" variant="secondary" text="Hello world" /></Stack>
It's easy to use CSS grid layout, or a component's abstraction to align
Code Editor
<Columns align={{ x: 'start' }}><StyledLink href="#shop" variant="primary" text="Hello world" /><StyledLink href="#shop" variant="secondary" text="Hello world" /></Columns>