LinkOverlay

The LinkOverlay component allows you to make entire cards or containers clickable by adding an overlay link. It consists of two parts: Root (the container) and Overlay (the clickable link).

Demo

React

Cape Cod

Cape Cod has long been known for stunning natural beauty, hundreds of miles of sandy coastline, magnificent whales migrating just off-shore, and world-class creative and recreational opportunities.

Show more

Cape of Good Hope

As one of the great capes of the South Atlantic Ocean, it has long been of special significance to sailors, many of whom refer to it simply as "the Cape". It is a waypoint on the Cape Route and the clipper route followed by clipper ships to the Far East and Australia, and still followed by several offshore yacht races.

Show more

Cape Canaveral

Cape Canaveral is a cape in Brevard County, Florida, in the United States, near the center of the state's Atlantic coast. Cape Canaveral became the test site for missiles when the legislation for the Joint Long Range Proving Ground was passed by the 81st Congress and signed by President Harry Truman on May 11, 1949.

Show more

Vue

Cape Cod

Cape Cod has long been known for stunning natural beauty, hundreds of miles of sandy coastline, magnificent whales migrating just off-shore, and world-class creative and recreational opportunities.

Show more

Cape of Good Hope

As one of the great capes of the South Atlantic Ocean, it has long been of special significance to sailors, many of whom refer to it simply as "the Cape". It is a waypoint on the Cape Route and the clipper route followed by clipper ships to the Far East and Australia, and still followed by several offshore yacht races.

Show more

Cape Canaveral

Cape Canaveral is a cape in Brevard County, Florida, in the United States, near the center of the state's Atlantic coast. Cape Canaveral became the test site for missiles when the legislation for the Joint Long Range Proving Ground was passed by the 81st Congress and signed by President Harry Truman on May 11, 1949.

Show more

Usage

React

import {
  Card,
  LinkOverlay,
} from '@fintech-sandpit/ui/react';

return (
  <LinkOverlay.Root className="relative w-[300px]">
    <Card.Root>
      <Card.Body>
        <Card.Title>
          Clickable Card
        </Card.Title>

        <Card.Description>
          The entire card is clickable
        </Card.Description>
      </Card.Body>
    </Card.Root>

    <LinkOverlay.Overlay href="/path/to/page" />
  </LinkOverlay.Root>
);

Vue

<script setup lang="ts">
import {
  Card,
  LinkOverlay,
} from '@fintech-sandpit/ui/vue';
</script>

<template>
  <LinkOverlay.Root class="relative w-[300px]">
    <Card.Root>
      <Card.Body>
        <Card.Title>
          Clickable Card
        </Card.Title>

        <Card.Description>
          The entire card is clickable
        </Card.Description>
      </Card.Body>
    </Card.Root>

    <LinkOverlay.Overlay href="/path/to/page" />
  </LinkOverlay.Root>
</template>

Props

LinkOverlay Overlay Props

React

Name	Type	Required	Default	Description
href	string		—	The URL to navigate to
asChild	boolean		false	Whether to render the link as a child component

Vue

Name	Type	Required	Default	Description
href	string		—	The URL to navigate to
as-child	boolean		false	Whether to render the link as a child component