Blog cards — Ordered article series

Three numbered article links form a compact series card beneath a shared heading. Use it when reading order is part of the content.

ReactHTML

1440 × 480

Open in new tab

Component.tsx32 lines

export default function BlogCardSeriesIndex() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-5 text-neutral-900 sm:w-80">
      <p className="text-xs text-neutral-500">Series title · 3 articles</p>
      <h3 className="mt-3 text-lg font-semibold">Heading for the article series</h3>
      <ol role="list" className="mt-5 border-t border-neutral-200">
        <li className="grid grid-cols-[24px_1fr] gap-3 border-b border-neutral-200 py-2">
          <span className="font-mono text-xs text-neutral-500">01</span>
          <div>
            <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">First article topic</a>
            <p className="mt-1 text-xs text-neutral-500">4 min read</p>
          </div>
        </li>
        <li className="grid grid-cols-[24px_1fr] gap-3 border-b border-neutral-200 py-2">
          <span className="font-mono text-xs text-neutral-500">02</span>
          <div>
            <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Second article topic</a>
            <p className="mt-1 text-xs text-neutral-500">6 min read</p>
          </div>
        </li>
        <li className="grid grid-cols-[24px_1fr] gap-3 border-b border-neutral-200 py-2">
          <span className="font-mono text-xs text-neutral-500">03</span>
          <div>
            <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Third article topic</a>
            <p className="mt-1 text-xs text-neutral-500">8 min read</p>
          </div>
        </li>
      </ol>
      <p className="mt-4 text-xs text-neutral-500">By Alex Rivera</p>
    </article>
  )
}

Pattern notes

When to use: Use for sequential reading or a multipart guide. Choose an ordinary article card for one independent post. Variations include two parts or a current-part label.
Hierarchy: The series heading frames the ordered topics. Keep heading below 7 words, topic links below 4 and author below 3.
Responsive: The numbered rows remain stacked at every width, with the topic column filling available space.
Layout: The bordered white root is 288px w-72 wide with an 8px rounded-lg radius. The p-5 card becomes 320px from 640px. A series label and 18px heading lead a divided ordered list after 20px. Each row has a 24px number rail, 12px gap, 8px vertical padding and a linked topic above a reading time.
States: Links underline on hover and show a 2px neutral-900 keyboard outline offset by 2px.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Series title / 3 articles                                    │
│ Heading for the article series                               │
│ ──────────────────────────────────────────────────────────   │
│ 01  [First article topic] / 4 min read                       │
│ 02  [Second article topic] / 6 min read                      │
│ 03  [Third article topic] / 8 min read                       │
│ ──────────────────────────────────────────────────────────   │
│ By Alex Rivera                                               │
└──────────────────────────────────────────────────────────────┘

View all

Blog cards — Abstract and citation
Layout tags: stacked,sidebar,compact
Blog cards — Article contents card
Layout tags: stacked,list,compact
Blog cards — Cover image above text
Layout tags: stacked,media

Blog cards — Ordered article series

Pattern notes

More in Blog cards

Blog cards — Abstract and citation

Blog cards — Article contents card

Blog cards — Cover image above text