Horizontal Link Card

<div class="ws-link-card space-y-4">
  <a href="#" class="group flex items-center gap-4 rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-5 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z" />
        <path d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z" />
      </svg>
    </div>
    <div class="min-w-0 flex-1">
      <h3 class="text-sm font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Download SDK</h3>
      <p class="mt-0.5 text-sm text-[var(--ws-link-card-text-soft)]">Get the latest version of the SDK for your platform.</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>
  </a>

  <a href="#" class="group flex items-center gap-4 rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-5 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M4.5 2A1.5 1.5 0 0 0 3 3.5v13A1.5 1.5 0 0 0 4.5 18h11a1.5 1.5 0 0 0 1.5-1.5V7.621a1.5 1.5 0 0 0-.44-1.06l-4.12-4.122A1.5 1.5 0 0 0 11.378 2H4.5Zm2.25 8.5a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 3a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="min-w-0 flex-1">
      <h3 class="text-sm font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Read the Docs</h3>
      <p class="mt-0.5 text-sm text-[var(--ws-link-card-text-soft)]">Comprehensive guides and API reference documentation.</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>
  </a>
</div>