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-small.

When to use it

Use LinkBlockSmall for compact category tiles in navigation grids, seasonal edits, and small promotional strips. It is the simpler sibling of LinkBlock: just an image, a title overlay, and a link destination.

For larger promotional blocks with eyebrow text, CTAs, and variant styles, use LinkBlock instead.

Composition notes

LinkBlockSmall is minimal and prop-driven:

• image is the background image shown behind the title overlay.
• title renders as overlay text at the bottom of the tile.
• href makes the entire tile a clickable link.
• className adds width or grid-specific classes.

The component does not have variants or layout options. It is intentionally simple so it works consistently in grids without per-tile configuration.

Behavior and theming guidance

The tile uses an overlay gradient (controlled by --enad-overlay-color and opacity tokens) to keep the title readable over varied image content. Border radius follows --enad-card-radius.

Use CSS grid on the parent container to control the tile layout. The component does not impose a grid itself, so you choose the column count and gap based on the section needs. A 2-column mobile / 4-column desktop grid is the standard pattern.

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=LinkBlockSmall.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes