Byline

What it is

Who wrote a piece and when. A 40px avatar, the author name as a link, then the date in slate after a dot that CSS draws.

When to use

• Under the title of an article or a member blog post.
• Any content with one named author and a publish date.

When not to use

• One member in a directory: use Member card.
• The name under a testimonial: use the caption of Quote.
• The source and date of an outside rating: use Rating.

Rules

• Markup: <p class="hs-byline"> with img.hs-avatar (the 40px default), then span.hs-byline__text with a.hs-byline__name and span.hs-byline__date.
• Put the date in <time datetime="YYYY-MM-DD">.
• Do not type the dot between name and date: CSS draws it.
• Link the name to the author's profile.
• Colours read the ground context. When space is short, the date wraps under the name.
• Use fictional names in samples and snippets.

Accessibility

• The avatar takes alt="": the name next to it says who it is.
• The name is ink 13.0:1 with a line-strong underline and weight 600. The underline marks it as a link.
• The CSS dot has empty alt text, so a screen reader reads the name, then the date.
• Reduced motion removes the underline transition.

Variants

Byline

40px avatar, author link in ink 600 with a line-strong underline, date in slate.

<p class="hs-byline"><img class="hs-avatar" src="/placeholders/avatar.svg" width="40" height="40" alt=""><span class="hs-byline__text"><a class="hs-byline__name" href="/members/taylor-example">Taylor Example</a><span class="hs-byline__date"><time datetime="2026-04-01">April 1, 2026</time></span></span></p>