Article Meta

When to use

A horizontal strip of icon + value pairs that surface key metadata about a piece of content immediately under its title or hero. Reach for it on news article pages, blog post headers, doc page bylines, video player meta lines, podcast episode headers, forum thread titles — anywhere long-form content needs a quick metadata summary.

Basic example

import { Calendar, Clock, Eye, User } from "lucide-react"
import { ArticleMeta } from "@/components/article-meta"

export function ArticleHeader() {
  return (
    <ArticleMeta
      divider
      items={[
        { id: "author", icon: User, value: "Maya Chen", href: "/team/maya-chen" },
        { id: "date", icon: Calendar, value: "Apr 28, 2026" },
        { id: "read", icon: Clock, value: "5 min read", ariaLabel: "5 minute read" },
        { id: "views", icon: Eye, value: "12.4k", ariaLabel: "12,400 views" },
      ]}
    />
  )
}

Per-item link

Each item accepts an optional href — usually for the byline (link to author page) or date (link to permalink / archive). Pass linkComponent for router-aware links.

import Link from "next/link"

<ArticleMeta
  items={[
    { id: "author", icon: User, value: "Maya Chen", href: "/team/maya-chen" },
    { id: "date", icon: Calendar, value: "Apr 28, 2026", href: "/archive/2026-04-28" },
  ]}
  linkComponent={Link}
/>

Layout knobs

• align — start (default) / center / end. Use center for centered meta lines under hero overlays.
• divider — true applies pb-8 border-b border-borderfor the "between hero and body" placement.
• gapClass — defaults to gap-6. Override for tighter rhythms (e.g. gap-3 for video player meta).

Notes

• Items render as <li> inside a <ul role="list">for free list semantics (the explicit role works around Safari's VoiceOver handling of list-style: none).
• Item icons are decorative (aria-hidden). For icon-meaning clarity in screen readers, set ariaLabel on the item — it composes the link's accessible name when href is set, or wraps the unlinked content in a labeled span.
• Items can omit icon for text-only strips (e.g. category / issue / page metadata).
• Values are pre-formatted ReactNode. Bring your own date formatter (Intl.DateTimeFormat, date-fns, etc.) and number formatter (Intl.NumberFormat).
• The component is exported as React.memo. Memoize the items array (or pass a stable reference) for the memo to bite — inline items={[...]} defeats it.