Sep 28, 2026 6 min read

@use 'sprucecss/scss/spruce' as *;

.post-author {
  --avatar-size: 3rem;
  align-items: center;
  display: flex;
  gap: spacer('xs');

  + .post-author {
    margin-block-start: spacer('m');
  }

  &--sm {
    --avatar-size: 2rem;
    font-size: config('font-size-sm', $typography);
  }

  &__avatar {
    aspect-ratio: 1;
    block-size: var(--avatar-size);
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: var(--avatar-size);
    object-fit: cover;
  }

  &__caption {
    display: flex;
    flex-direction: column;
    line-height: config('line-height-md', $typography);
  }

  &__name {
    color: color('heading');
    font-weight: 700;
    text-decoration: none;

    &:hover {
      color: color('primary');
      text-decoration: underline;
    }
  }

  &__meta {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    margin-block: 0;
  }
}

<div class="post-author">
    <img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="48" height="48" loading="lazy">
    <div class="post-author__caption">
        <a class="post-author__name" href="#" rel="author">Adam Laki</a>
        <p class="post-author__meta">
            <time datetime="2026-09-28">Sep 28, 2026</time>
            <span aria-hidden="true">·</span>
            6 min read
        </p>
    </div>
</div>
<div class="post-author post-author--sm">
    <img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="32" height="32" loading="lazy">
    <a class="post-author__name" href="#" rel="author">Adam Laki</a>
</div>

Post author

Anatomy

.post-author with the avatar (__avatar) and the name (__name); .post-author__caption stacks the name and the meta line (__meta).
.post-author--sm is a compact, one-line version for cards and lists.

Accessibility

The avatar has an empty alt, because the name is right next to it; describing the photo would only repeat it.
Only the name is a link (with rel="author"), so the link text is the name, not "by Adam Laki" or an image.
The separator dot is hidden from screen readers.

Technical Details

Change the size with the --avatar-size custom property; the image keeps its ratio with object-fit: cover.
Set the width and height attributes on the image to reserve its space, and use loading="lazy" outside the first screen.