# Author Cards

Display author attribution as a profile strip with avatar, name, role, bio, and social links. Designed for blog post bylines, team pages, and contributor credits.

## Basic example

```markdown
author: Jane Doe
author-image: /media/jane.jpg
author-role: Senior Engineer at Acme Corp
author-bio: Jane writes about distributed systems, developer tooling, and the future of the web platform.
author-link: Twitter: https://x.com/example
author-link: GitHub: https://github.com/example
```

author: Jane Doe
author-image: https://i.pravatar.cc/128?img=5
author-role: Senior Engineer at Acme Corp
author-bio: Jane writes about distributed systems, developer tooling, and the future of the web platform.
author-link: Twitter: https://x.com/example
author-link: GitHub: https://github.com/example

The avatar is circle-cropped automatically. On mobile, the layout stacks vertically with the avatar centered above the text.

## Minimal author

Only the name is required. All other fields are optional:

```markdown
author: Bob Smith
```

author: Bob Smith

## Multiple authors

Write consecutive `author:` blocks to show multiple authors together. Separate each author with a blank line:

```markdown
author: Alice Chen
author-image: /media/alice.jpg
author-role: Product Designer
author-bio: Alice focuses on design systems and accessible interfaces.
author-link: Twitter: https://x.com/example

author: Marcus Rivera
author-image: /media/marcus.jpg
author-role: Staff Engineer
author-bio: Marcus specializes in performance optimization and web standards.
author-link: GitHub: https://github.com/example
author-link: mailto:hello@example.com
```

author: Alice Chen
author-image: https://i.pravatar.cc/128?img=9
author-role: Product Designer
author-bio: Alice focuses on design systems and accessible interfaces.
author-link: Twitter: https://x.com/example

author: Marcus Rivera
author-image: https://i.pravatar.cc/128?img=12
author-role: Staff Engineer
author-bio: Marcus specializes in performance optimization and web standards.
author-link: GitHub: https://github.com/example
author-link: mailto:hello@example.com

## Social links

Add `author-link:` lines for social profiles and contact info. Use the `Label: URL` format, or pass a bare URL to auto-detect the platform:

```markdown
author-link: Twitter: https://x.com/example
author-link: GitHub: https://github.com/example
author-link: LinkedIn: https://linkedin.com/in/example
author-link: https://example.com
author-link: hello@example.com
```

Bare email addresses are automatically converted to `mailto:` links. The explicit `mailto:` prefix also works. Brand icons display automatically for recognized platforms. Unrecognized URLs show a generic globe icon with either your custom label or "Website" as the default.

### Supported platforms

| URL pattern | Icon | Default label |
|---|---|---|
| `twitter.com` / `x.com` | Twitter/X | Twitter |
| `github.com` | GitHub | GitHub |
| `linkedin.com` | LinkedIn | LinkedIn |
| `youtube.com` | YouTube | YouTube |
| `discord.com` / `discord.gg` | Discord | Discord |
| `reddit.com` | Reddit | Reddit |
| `instagram.com` | Instagram | Instagram |
| Mastodon instances | Mastodon | Mastodon |
| `mailto:` or bare email | Mail | Email |
| Any other URL | Globe | Website |

## Syntax reference

Each author starts with `author:` (the name). Sub-fields are optional and can appear in any order:

| Prefix | What it does |
|---|---|
| `author:` | Starts a new author. Value is the display name (required). |
| `author-image:` | Avatar image URL. Rendered as a 64px circle. |
| `author-role:` | Job title, company, or role description. |
| `author-bio:` | Short bio or description text. |
| `author-link:` | Social or contact link. Use `Label: URL` or bare URL. Multiple allowed. |

Consecutive author blocks (separated by single blank lines) form a single group. Place author cards at the end of blog posts, on team pages, or anywhere attribution is needed.

## Notes

- Author cards render as a full-width horizontal strip — they don't participate in [card grids](/docs/cards).
- All text fields support inline markdown: `**bold**`, `*italic*`, and `[links](url)`.
- Social icons use the same brand icon set as [footer social links](/docs/footer).
- For grid-based team layouts, use regular [cards](/docs/cards) with `card-image:` and `card-text:` instead.