Link Spread
An absolutely positioned anchor that makes an entire container clickable.
Loading preview…
1<script lang="ts">
2 import LinkSpread from './link-spread.svelte';
3</script>
4
5<article class="relative rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
6 <h3 class="font-medium">Fully clickable card</h3>
7 <p class="mt-1 text-sm text-muted-foreground">The whole surface links to the details page.</p>
8 <LinkSpread href="#" aria-label="Open details" />
9</article>
10Installation
1. Copy these files into your project
- ~/components/link-spread/link-spread.svelte
- ~/components/link-spread/link-spread.types.ts
Usage
Place link spread inside a relatively positioned parent to make the whole card surface clickable
while keeping the card content visible and accessible. Always pass an aria-label, because the
anchor has no visible text of its own.
1<script lang="ts">
2 import LinkSpread from '~/components/link-spread/link-spread.svelte';
3</script>
4
5<article class="relative">
6 <h3>Card title</h3>
7 <p>Card copy</p>
8 <LinkSpread href="/details" aria-label="Open details" />
9</article>