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
Jane Doe
Jane Doe
Senior Engineer at Acme Corp

Jane writes about distributed systems, developer tooling, and the future of the web platform.

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
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:hello@example.com
Alice Chen
Alice Chen
Product Designer

Alice focuses on design systems and accessible interfaces.

Marcus Rivera
Marcus Rivera
Staff Engineer

Marcus specializes in performance optimization and web standards.

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: 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