Author Card
Author bio card with circular avatar.
Classes
| Class | Purpose |
|---|---|
.author-card | Flex container with gap, padding, and radius |
.author-avatar | 56px circular avatar placeholder |
Preview
<aside class="author-card" style="background: var(--color-surface)">
<div class="author-avatar" style="background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl)">AH</div>
<div>
<div style="font-weight: var(--font-weight-semibold)">Allan Hansen</div>
<div style="font-size: var(--font-size-sm); color: var(--color-text-secondary)">Designer and frontend architect.</div>
</div>
</aside>Usage
html
<aside class="author-card bg-surface" aria-label="About the author">
<div class="author-avatar bg-primary text-on-primary font-bold text-xl"
aria-hidden="true">AH</div>
<div>
<div class="font-semibold">Allan Hansen</div>
<div class="text-sm text-secondary">Designer and frontend architect.</div>
</div>
</aside>