related-articles blog links compact minimal related-articles compact link-list minimal read-more compact related articles list minimal content links without images
Related Articles Compact
Fetch pattern JSON:
curl https://webspire.de/patterns/related-articles/compact.json compact.html
<section aria-label="Related articles" class="ws-related-articles mx-auto max-w-3xl px-4 py-12">
<h2 class="mb-6 text-2xl font-bold text-[var(--ws-related-articles-text)]">Related Articles</h2>
<ul class="divide-y divide-[var(--ws-related-articles-border)]" role="list">
<li>
<a href="#" class="flex items-center justify-between gap-4 py-3 transition-colors hover:opacity-80">
<span class="text-sm font-medium text-[var(--ws-related-articles-text)]">Building Accessible Color Systems</span>
<time datetime="2026-03-15" class="shrink-0 text-xs text-[var(--ws-related-articles-text-muted)]">Mar 15, 2026</time>
</a>
</li>
<li>
<a href="#" class="flex items-center justify-between gap-4 py-3 transition-colors hover:opacity-80">
<span class="text-sm font-medium text-[var(--ws-related-articles-text)]">Optimizing Web Font Loading</span>
<time datetime="2026-03-12" class="shrink-0 text-xs text-[var(--ws-related-articles-text-muted)]">Mar 12, 2026</time>
</a>
</li>
<li>
<a href="#" class="flex items-center justify-between gap-4 py-3 transition-colors hover:opacity-80">
<span class="text-sm font-medium text-[var(--ws-related-articles-text)]">Container Queries in Production</span>
<time datetime="2026-03-08" class="shrink-0 text-xs text-[var(--ws-related-articles-text-muted)]">Mar 8, 2026</time>
</a>
</li>
<li>
<a href="#" class="flex items-center justify-between gap-4 py-3 transition-colors hover:opacity-80">
<span class="text-sm font-medium text-[var(--ws-related-articles-text)]">Modern CSS Reset Strategies</span>
<time datetime="2026-03-05" class="shrink-0 text-xs text-[var(--ws-related-articles-text-muted)]">Mar 5, 2026</time>
</a>
</li>
<li>
<a href="#" class="flex items-center justify-between gap-4 py-3 transition-colors hover:opacity-80">
<span class="text-sm font-medium text-[var(--ws-related-articles-text)]">Scroll-Driven Animations Guide</span>
<time datetime="2026-03-01" class="shrink-0 text-xs text-[var(--ws-related-articles-text-muted)]">Mar 1, 2026</time>
</a>
</li>
</ul>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
related-articlesbloglinkscompactminimal
Slots
| Name | Required | Description |
|---|---|---|
| title | Yes | Article title as a clickable link. |
| date | No | Publication date. |
A compact list of related article links showing only the title and date per row. No cards, no excerpts — ideal for sidebars or space-constrained layouts.