# Byline

> Who wrote a piece and when: a 40px avatar, the author name as a link, and the date.

- Block class: `.hs-byline`
- CSS: `components/base.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: built, open to change
- Decision record: https://brand.honorsociety.org/decisions/components-round-3.html
- Variants: Byline
- HTML page: https://brand.honorsociety.org/components/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](/components/member-card/).
- The name under a testimonial: use the caption of [Quote](/components/quote/).
- The source and date of an outside rating: use [Rating](/components/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.

```html
<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>
```