AuthorCard. A semantic author biography with portrait and profile links.
- Discovery
- Static
- Stability · Initial
- :::postkit-author-card
Usage.
<AuthorCard
name="Ada Hart"
role="Independent publisher"
avatarSrc="/component-preview.svg"
bio="Writing about durable content systems and the open web."
links='[{"label":"Articles","href":"#component-preview"},{"label":"Profile","href":"#component-preview"}]'
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| nameRequired | string | None | The author display name. |
| role | string | None | The author role, title, or affiliation. |
| avatarSrc | string | None | The author portrait URL. |
| avatarAlt | string | None | Alternative text for the author portrait. |
| href | string | None | The author profile URL. |
| bio | string | None | A plain-text author biography. |
| links | JSON string | None | A JSON array of author links with label, href, and optional rel fields. |
| presentation | "card" | "compact" | "inline" | "card" | How much author detail is displayed. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- avatar
- content
- header
- name
- nameLink
- role
- bio
- links
- link
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailAs text
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned