Author Card

When to use

A small "person identity" block — avatar, name, role, optional bio — to surface authorship context next to a piece of content. Reach for it on news article sidebars, blog post bylines, doc page authors, team listings, comment headers, contributor cards.

It's a single card, not a list. Sized for sidebars (works at ~280px and up). Optionally clickable as a whole — pass href+ your router's link component to make the entire surface navigate.

Basic example

import { AuthorCard } from "@/components/author-card"

export function Example() {
  return (
    <AuthorCard
      name="Maya Chen"
      role="Senior Editor"
      bio="Specializes in sustainable urbanism and environmental journalism."
      imageSrc="/authors/maya.jpg"
      imageAlt="Maya Chen"
    />
  )
}

Clickable card

Pass href to make the whole surface navigate. By default the root renders as a native <a>; pass linkComponent for router-aware links.

import Link from "next/link"
import { AuthorCard } from "@/components/author-card"

<AuthorCard
  name="Daniel Park"
  role="Product Designer"
  bio="Currently designing onboarding flows."
  imageSrc="/team/daniel.jpg"
  href="/team/daniel-park"
  linkComponent={Link}
/>

No image — fallback icon

When imageSrc is omitted, a tinted circle with a Lucide User icon renders. Override the icon via fallbackIcon for non-person bylines (e.g. Users for collectives).

import { Users } from "lucide-react"

<AuthorCard
  name="The Editorial Team"
  role="Collective"
  bio="Reporting from across the newsroom."
  fallbackIcon={Users}
  tone="muted"
/>

i18n

All visible chrome strings live in labels; English defaults ship in AUTHOR_CARD_DEFAULT_LABELS. The card text content (name, role, bio) is consumer data — pass localized strings directly.

<AuthorCard
  name="Aylin Demir"
  role="Kıdemli Editör"
  bio="Sürdürülebilir şehircilik ve çevre konularında uzmanlaşmış."
  labels={{ heading: "Yazar Hakkında" }}
/>

Notes

• The component is exported as React.memo. For memoization to hold, pass stable references for linkComponent / fallbackIcon(don't create them inline on every render).
• The avatar image uses loading="lazy". Broken srcshows the browser's default broken-image icon — ensure URLs are valid (consumer responsibility).
• When the card is clickable, the accessible name is the author's name (via aria-labelledby). The heading text reads as a decorative label.
• Use headingAsto fit the card under your page's landmark structure — most sidebars want h3 (the default).