LinkBlock
Promotional navigation block for category landings, curated edits, and campaign jump points. Supports image overlay, card, and text-only presentations.
Best for
Import
import { LinkBlock } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use LinkBlock when a page section needs a promotional navigation element that drives visitors to a category, collection, campaign, or editorial destination. It bridges the gap between a full Hero and a simple text link.
For compact category tiles in a grid, use LinkBlockSmall instead. For pure editorial images without navigation intent, use ImageBlock.
Composition notes
LinkBlock is a prop-driven block with three visual variants:
variant="overlay"places text over a background image with a gradient overlay. The most visual option for category grids and hero-adjacent sections.variant="card"separates the image area and text area into a card layout. Works well for editorial curations and smaller promotional blocks.variant="text-only"drops the image entirely for a text-first approach. Good for journal links and secondary content pointers.
Content props:
eyebrow(small label above the title),title(primary heading)buttonLabel+buttonHref(CTA that links the whole block)image(background or media image for overlay and card variants)colorThemecontrols background color for card and text-only variants
Behavior and theming guidance
The overlay variant responds to CSS variables for overlay color, opacity, heading weight, tracking, and text transform. This lets the same block feel editorial or commercial depending on the active theme.
classNames now exposes stable hooks for eyebrow, title, action, content, image, and the other shared anatomy parts. That means the same LinkBlock can feel like a restrained editorial card in one implementation and a loud campaign destination in another without brittle descendant selectors.
Card and text-only variants respond to colorTheme for background treatment. Use muted for subtle grids and primary or inverse for standout sections.
Motion duration for hover transitions responds to --enad-motion-duration. The overlay variant applies a subtle scale or opacity shift on hover for interactive feedback.
Examples
Live examples you can edit directly in the sandbox.
Image overlay block
Text sits over the image with a gradient overlay. The standard choice for category grids and campaign landing sections.
Card with muted theme
The card variant separates the image from the text area. Good for editorial jump points and seasonal edits.
Text-only editorial link
No image, just an eyebrow, title, and CTA. Works for journal links, guide teasers, and secondary content pointers.
Quiet card vs bold overlay
Use semantic classNames hooks to take the same LinkBlock behavior in very different visual directions.
Slots
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| image | string | — | Background image for the block |
| eyebrow | string | — | Small label shown above the title |
| title | string | — | Main title text of the block |
| variant | string | "overlay" | Visual style of the block |
| buttonLabel | string | — | Label for the call-to-action link |
| buttonHref | string | — | URL the block navigates to |
| colorTheme | string | — | Background and text color theme for card and text-only variants |
| classNames | Partial<Record<import("@enadhq/enad-react-sdk/client/storefront/types").LinkBlockSlot, string>> | — | No description yet. Slot keys linktitleimagecontentrootimageAreaoverlayeyebrowaction |
| className | string | — | No description yet. |