# Author Card

> Identity, biography, profile links, and a follow toggle.

- Category: Content
- Kind: component
- Page: https://uaiblocks.dev/components/author-card
- Registry item: https://uaiblocks.dev/r/author-card.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/author-card.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/author-card.json
```

## Usage

```tsx
"use client";

import {
  AuthorCard,
  AuthorCardAvatar,
  AuthorCardBio,
  AuthorCardFollow,
  AuthorCardHeader,
  AuthorCardLink,
  AuthorCardLinks,
  AuthorCardName,
  AuthorCardRole,
  type AuthorCardVariant,
} from "@/components/ui/uai/author-card";

export function AuthorCardPreview({ variant = "card" }: { variant?: AuthorCardVariant }) {
  return (
    <AuthorCard variant={variant}>
      <AuthorCardAvatar name="Marta Oliveira" />
      <AuthorCardHeader>
        <div>
          <AuthorCardName>Marta Oliveira</AuthorCardName>
          <AuthorCardRole>Staff engineer, Payments</AuthorCardRole>
        </div>
        <AuthorCardFollow />
      </AuthorCardHeader>
      <AuthorCardBio>
        Writes about retry budgets, idempotent APIs, and the boring parts of moving money between
        banks.
      </AuthorCardBio>
      <AuthorCardLinks>
        <AuthorCardLink href="#posts" onClick={(event) => event.preventDefault()}>
          42 posts
        </AuthorCardLink>
        <AuthorCardLink href="#github" onClick={(event) => event.preventDefault()}>
          GitHub
        </AuthorCardLink>
        <AuthorCardLink href="#site" onClick={(event) => event.preventDefault()}>
          marta.dev
        </AuthorCardLink>
      </AuthorCardLinks>
    </AuthorCard>
  );
}
```

## Anatomy

- `AuthorCard`
  - `AuthorCardAvatar`
  - `AuthorCardHeader`
    - `AuthorCardName`
    - `AuthorCardRole`
    - `AuthorCardFollow`
  - `AuthorCardBio`
  - `AuthorCardLinks`
    - `AuthorCardLink`

## Accessibility

- The card is an article labelled by the author name; the avatar is decorative and falls back to initials when the image is missing or fails.
- Follow is a toggle button with aria-pressed and a constant visible label, described by the author name.
- Profile links are a labelled list of native links with visible focus.