Link Card

Fetch pattern JSON: curl https://webspire.de/patterns/link-card/base.json

base.html

<div class="ws-link-card space-y-4">
  <a href="#" class="group block rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
    <div class="flex items-center justify-between">
      <div>
        <h3 class="text-base font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Getting Started</h3>
        <p class="mt-1 text-sm text-[var(--ws-link-card-text-soft)]">Learn the basics and set up your first project in minutes.</p>
      </div>
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-link-card-text-soft)] transition group-hover:translate-x-1 group-hover:text-[var(--ws-link-card-accent)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
      </svg>
    </div>
  </a>

  <a href="#" class="group block rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
    <div class="flex items-center justify-between">
      <div>
        <h3 class="text-base font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">API Reference</h3>
        <p class="mt-1 text-sm text-[var(--ws-link-card-text-soft)]">Explore the full API documentation with examples and guides.</p>
      </div>
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-link-card-text-soft)] transition group-hover:translate-x-1 group-hover:text-[var(--ws-link-card-accent)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
      </svg>
    </div>
  </a>
</div>

Details

Family

link-card

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

linkcardnavigationarrowhover

Slots

Name	Required	Description
title	Yes	Card heading text.
description	Yes	Supporting text below the title.

Stacked card-style links with title, description, and a right-pointing arrow. Border highlights on hover with an indigo accent, and the arrow nudges right for a subtle interaction cue.