Stretched link
Make any element — a card, a list item, a media object — fully clickable by stretching a
nested link over it. StretchedLink lays an absolute ::after
overlay across its nearest positioned ancestor, so a click anywhere on that ancestor
activates the link.
Import
import { StretchedLink } from '@metatoy/bootstrap-styled';Example
Give the container a positioning context (position: relative, as Card bodies already
provide), then drop a StretchedLink inside. The link’s hit area expands to fill that
container while its text stays in the normal flow.
The overlay only reaches as far as the nearest positioned ancestor. If nothing between
the link and the page root is positioned, the overlay stretches to the whole page — so
always set position: relative on the element you want to become clickable.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | React.ElementType | — | Defaults to `<a>`. |
StretchedLink renders an <a> by default and forwards every native anchor attribute
(href, target, rel, download, …) plus a ref. Use as to render it as a
different element — for example as={Link} for a router link.
Theming
There is nothing to theme: the helper emits the exact Bootstrap .stretched-link rule (an
absolutely-positioned, transparent ::after with z-index: 1) and inlines it, so it works
with or without Bootstrap’s utility CSS loaded. The link text itself inherits color and
styling from your normal link/typography theme.
Accessibility
- The stretched overlay is purely visual hit-area; the accessible name still comes from the link’s own text content, so keep meaningful link text (avoid a bare “Read more” where the surrounding heading isn’t programmatically associated).
- Because the overlay sits at
z-index: 1, any other interactive element inside the same positioned container (a button, a second link, selectable text) becomes unreachable. Keep a stretched link to one clickable target per container; if you need more, don’t stretch. - Text selection inside the container is also suppressed by the overlay — a known trade-off of the pattern.