Skip to main content
xoji

Card Link
Info:Layout html svelte astro Success: coverage 3/3

A whole card that is a single link: the click target is the card, not a button inside it.

Live demo

live · @xoji/astro

Card Link

A grid of destinations

Button

The thing people click — variants, tones, and sizes.

View component →

Field

A labelled input with help text and validation.

View component →

Dialog

A modal surface that traps focus and renders its body.

View component →

A prev / next pager

← Previous

Card

Next →

Cluster

Flat, non-interactive

A link card with no hover lift — still one click target, just calmer.

Card Link is a Card that navigates. It renders one <a> carrying the card's surface, padding, and slots, so the entire card is the click target instead of a link buried in it.

It composes the same interactive, overlay, and compact looks as Card, defaults to interactive (a link card invites the click), and resets the underline and ink so the card reads as a card, not a hyperlink. Pass href (plus optional target/rel); a keyboard focus-visible ring lands on the card itself. Reach for it wherever a card is a destination: a pager, a nav grid, a list of entries.

When to use

How this component composes with the rest of the set.

Use it for a prev/next pager: one CardLink per direction, the whole card a navigation target.
Lay a grid of CardLinks for an index: each card a destination, no nested anchors to trip a screen reader.
It composes Card's surface; reach for plain Card when the click target is a Button inside the card, not the card itself.

Props

6 props, straight from the manifest.

PropTypeDefaultBindingsDescription
href string —
html svelte astro
The destination. Renders as the anchor's `href`.
target string —
html svelte astro
The anchor `target` (e.g. `_blank`).
rel string —
html svelte astro
The anchor `rel` (e.g. `noreferrer`).
interactive boolean true
html svelte astro
The lift-and-highlight hover treatment. On by default, since a link card invites the click; set `false` for a flat link card.
overlay boolean false
html svelte astro
The overlay surface: a translucent fill over whatever sits behind it.
compact boolean false
html svelte astro
Tighter padding and gap for dense lists of link cards.

Appearance

States

focus-visible

 .xoji-card-link:focus-visible

Keyboard focus on the card: a token ring plus a transparent outline that becomes real in forced-colors mode.

Anatomy

The named parts that make up the component, with their selectors.

card-link

 .xoji-card-link

The anchor root carrying the card classes plus the link reset.

focus

 .xoji-card-link:focus-visible

The keyboard focus ring on the card itself.
--border-normal --border-thick --ring

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 3/3 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--border-normal --border-thick --ring

Slots
default
html svelte astro

The card body.
header
html svelte astro

An optional header row, set off from the body.
footer
html svelte astro

An optional footer row, ruled off below the body.

Accessibility
The card is a single <a>, so there is exactly one tab stop and one announced link. Never nest another link or button inside it.
Focus shows on the card with a focus-visible ring plus a transparent outline the forced-colors base rule promotes to a real system outline.
Give the link a clear accessible name through its content (a heading or label), since the whole card is the link text.

Code

A card that navigates

The whole card is one link, with the interactive lift on hover and a header and footer.

 
<xoji-card-link href="/components/button" interactive>
	<strong slot="header">Button</strong>
	The thing people click — variants, tones, and sizes.
	<span slot="footer">View component →</span>
</xoji-card-link>
 
<script lang="ts">
	import { CardLink } from "@xoji/svelte";
</script>

<CardLink href="/components/button" interactive>
	{#snippet header()}<strong>Button</strong>{/snippet}
	The thing people click — variants, tones, and sizes.
	{#snippet footer()}<span>View component →</span>{/snippet}
</CardLink>
 
---
import { CardLink } from "@xoji/astro";
---

<CardLink href="/components/button" interactive>
	<strong slot="header">Button</strong>
	The thing people click — variants, tones, and sizes.
	<span slot="footer">View component →</span>
</CardLink>