Author Byline

Attribution line showing author and date.

html

<div class="byline">
  <span class="byline__avatar" style="background:#BFD9F2;" aria-hidden="true">&#128100;</span>
  <p class="byline__text">
    <span class="byline__name">Priya Nair</span>
    <span class="byline__role">Senior Editor</span>
    <span aria-hidden="true">&middot;</span>
    <time class="byline__date">18 Aug 2026</time>
  </p>
</div>
<style>
.byline { display: flex; align-items: center; gap: 10px; font: 14px system-ui, sans-serif; color: #241430; }
.byline__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.byline__text { margin: 0; display: flex; align-items: center; gap: 6px; }
.byline__name { font-weight: 600; }
.byline__role, .byline__date { color: #241430aa; }
</style>

tailwind

<div class="flex items-center gap-2.5 font-sans text-sm text-[#241430]">
  <span class="w-9 h-9 rounded-full flex items-center justify-center text-base flex-shrink-0" style="background:#BFD9F2;" aria-hidden="true">&#128100;</span>
  <p class="m-0 flex items-center gap-1.5">
    <span class="font-semibold">Priya Nair</span>
    <span class="text-[#241430]/70">Senior Editor</span>
    <span aria-hidden="true">&middot;</span>
    <time class="text-[#241430]/70">18 Aug 2026</time>
  </p>
</div>

react

export function AuthorByline({
  authorName = "Priya Nair",
  role = "Senior Editor",
  date = "18 Aug 2026",
  showAvatar = true,
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, font: "14px system-ui, sans-serif", color: "#241430" }}>
      {showAvatar && (
        <span aria-hidden="true" style={{ width: 36, height: 36, borderRadius: "50%", display: "flex",
          alignItems: "center", justifyContent: "center", fontSize: 16, flexShrink: 0, background: accent }}>
          &#128100;
        </span>
      )}
      <p style={{ margin: 0, display: "flex", alignItems: "center", gap: 6 }}>
        <span style={{ fontWeight: 600 }}>{authorName}</span>
        <span style={{ color: "#241430aa" }}>{role}</span>
        <span aria-hidden="true">&middot;</span>
        <time style={{ color: "#241430aa" }}>{date}</time>
      </p>
    </div>
  );
}