AuthorBio

Author biography card: avatar, name, role, and markdown bio. Fully input-driven: pass the details directly, or pass slug to resolve them from the site's author registry (direct props override registry fields). Renders nothing when no name resolves (unknown slug or empty input).

Status: stable. Group: structure. Markdown version: /design-system/components/author-bio.md

When to use

About-the-author block with avatar, name, and short biography; the end-of-article companion to the Author byline.

When not to use

The contract records no forbidden uses.

Look-alikes

Author: Do not use Author for a full biography or social-link block; use AuthorBio instead.

Props

AuthorBio props
Prop	Type	Default	Description	Required
`slug`	`string`	none	Optional author slug resolved from the site's authors registry; direct props below override the registry fields.	No
`name`	`string`	none	Author name. Required unless `slug` resolves it.	No
`imageUrl`	`string \| { default: string } \| StaticImageData`	none	Avatar image source: a URL, an imported asset path, or static image data.	No
`role`	`string`	none	Role/title shown under the name (e.g. "Founder, CEO").	No
`bio`	`string`	none	Biography text (markdown). Paragraphs are separated by blank lines; the `compact` variant renders only the first one.	No
`email`	`string`	none	Contact email rendered as a mailto link when `showContact` is set.	No
`className`	`string`	none	Optional CSS class for styling extension.	No
`heading`	`string`	none	Optional custom heading text (defaults to the author name)	No
`showContact`	`boolean`	`false`	Render the author's contact email (mailto) after the bio, if the author has one.	No
`profileHref`	`string`	none	Link the author's name to their profile page (e.g. /blog/authors/<slug>).	No
`variant`	`"full" \| "compact"`	`full`	Full renders the whole biography (author pages). compact renders only the lead paragraph, for the end of an article. Defaults to full.	No

Variants

Available variants: full, compact (default full).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

AuthorBio rules
Level	Rule	How it is checked
MUST	ARIA: Region role via aria-label.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Heading level 3 for author name.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
MUST NOT	Maintainers: Do not bypass design tokens or skip forced-colors verification at beta.	Release review; not machine-checked.

Install and import

Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
Import: import { AuthorBio } from "@digitaltableteur/react";
Entry point: @digitaltableteur/react/content exports it too.
Styles: import @digitaltableteur/react/style.css once at the app boundary.