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:[email protected]
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: [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 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