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
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
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:
author: Bob Smith
Multiple authors
Write consecutive author: blocks to show multiple authors together. Separate each author with a blank line:
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:[email protected]
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:
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: [email protected]
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 | |
github.com |
GitHub | GitHub |
linkedin.com |
||
youtube.com |
YouTube | YouTube |
discord.com / discord.gg |
Discord | Discord |
reddit.com |
||
instagram.com |
||
| Mastodon instances | Mastodon | Mastodon |
mailto: or bare 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.
- All text fields support inline markdown:
**bold**,*italic*, and[links](url). - Social icons use the same brand icon set as footer social links.
- For grid-based team layouts, use regular cards with
card-image:andcard-text:instead.