Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/storefront/link-block.

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)
• colorTheme controls background color for card and text-only variants

The whole block is clickable

The CTA button is the primary affordance, but the entire block surface links to buttonHref. Keep this in mind when composing grids: visitors expect to click anywhere on the block.

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.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=LinkBlock.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes