see-also related navigation links cross-reference see-also related links navigation cross-reference further-reading show related page links display see also navigation section
See Also
Fetch pattern JSON:
curl https://webspire.de/patterns/see-also/base.json base.html
<nav class="ws-see-also mx-auto max-w-lg rounded-xl border border-[var(--ws-see-also-border)] bg-[var(--ws-see-also-bg)] p-6" aria-label="Related pages">
<h3 class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-see-also-text-soft)]">See also</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="group flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-see-also-accent)] transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
<div>
<span class="font-medium text-[var(--ws-see-also-text)] group-hover:text-[var(--ws-see-also-accent)]">Getting Started Guide</span>
<p class="mt-0.5 text-sm text-[var(--ws-see-also-text-soft)]">Learn how to set up and configure your project from scratch.</p>
</div>
</a>
</li>
<li>
<a href="#" class="group flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-see-also-accent)] transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
<div>
<span class="font-medium text-[var(--ws-see-also-text)] group-hover:text-[var(--ws-see-also-accent)]">API Reference</span>
<p class="mt-0.5 text-sm text-[var(--ws-see-also-text-soft)]">Explore all available endpoints, parameters, and response formats.</p>
</div>
</a>
</li>
<li>
<a href="#" class="group flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-see-also-accent)] transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
<div>
<span class="font-medium text-[var(--ws-see-also-text)] group-hover:text-[var(--ws-see-also-accent)]">Deployment Checklist</span>
<p class="mt-0.5 text-sm text-[var(--ws-see-also-text-soft)]">Ensure everything is ready before going live with your application.</p>
</div>
</a>
</li>
</ul>
</nav>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
see-alsorelatednavigationlinkscross-reference
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section label, typically "See also". |
| links | Yes | List of links with title, description, and arrow icon. |
A “See also” navigation component with arrow icons and a link list. Each entry has a title and a brief description. Wrapped in a bordered card with semantic nav markup.