link card horizontal icon navigation link card horizontal icon navigation row inline horizontal link card with icon icon and text navigation card
Horizontal Link Card
Fetch pattern JSON:
curl https://webspire.de/patterns/link-card/horizontal.json horizontal.html
<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>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
linkcardhorizontaliconnavigation
Slots
| Name | Required | Description |
|---|---|---|
| icon | Yes | Leading icon in a colored container. |
| title | Yes | Card heading text. |
| description | Yes | Supporting text beside the icon. |
Horizontal link cards with a colored icon container on the left, title and description in the center, and an arrow on the right. Extends the base link card with a side-by-side layout for compact navigation.