See Also Compact

Fetch pattern JSON: curl https://webspire.de/patterns/see-also/compact.json

compact.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)] px-5 py-4" aria-label="Related pages">
  <h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-see-also-text-soft)]">See also</h3>
  <ul class="mt-3 space-y-1.5">
    <li>
      <a href="#" class="group inline-flex items-center gap-2 text-sm font-medium text-[var(--ws-see-also-text)] hover:text-[var(--ws-see-also-accent)]">
        <svg class="h-4 w-4 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>
        Getting Started Guide
      </a>
    </li>
    <li>
      <a href="#" class="group inline-flex items-center gap-2 text-sm font-medium text-[var(--ws-see-also-text)] hover:text-[var(--ws-see-also-accent)]">
        <svg class="h-4 w-4 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>
        API Reference
      </a>
    </li>
    <li>
      <a href="#" class="group inline-flex items-center gap-2 text-sm font-medium text-[var(--ws-see-also-text)] hover:text-[var(--ws-see-also-accent)]">
        <svg class="h-4 w-4 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>
        Deployment Checklist
      </a>
    </li>
  </ul>
</nav>

Details

Family

see-also

Tier

enhanced

Kind

component

Extends

see-also/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

see-alsorelatednavigationlinkscompactinline

Slots

Name	Required	Description
heading	Yes	Section label, typically "See also".
links	Yes	Inline list of links with arrow icons, title only.

Compact variant of the see-also navigation. Shows only arrow icons and link titles without descriptions, for tighter layouts and sidebar use.