Article Meta

Metadata row and pill badge for articles.

---

Classes

Class	Purpose
.article-meta	Flex row with gap and center alignment
.article-tag	Inline pill badge — primary bg, full radius

Preview

<div class="article-meta" style="font-size: var(--font-size-sm); color: var(--color-text-secondary)">
  <span class="article-tag" style="font-size: var(--font-size-xs)">Design</span>
  <time>1 March 2026</time>
  <span>&middot;</span>
  <span>6 min read</span>
</div>

Design 1 March 2026 · 6 min read

---

Usage

<div class="article-meta text-sm text-secondary">
  <span class="article-tag text-xs font-medium">Design</span>
  <time datetime="2026-03-01">1 March 2026</time>
  <span aria-hidden="true">&middot;</span>
  <span>6 min read</span>
</div>