AuthorCard

Displays a single person card with avatar image, name, and optional link.

Props

Prop	Type	Required	Default	Description
`author`	`Person`	Yes	-	Person object from Contentstack containing title, url, and metadata
`cslp`	`CSLPFieldMapping`	No	-	CSLP mapping for editable fields (Contentstack Live Preview)
`label`	`string`	No	`'Author'`	Label text to display above person name (e.g., "Author", "Participant")

Usage

1import AuthorCard from '@/components/molecules/AuthorCard';
2
3<AuthorCard 
4  author={{
5    title: "John Doe",
6    url: "/person/john-doe",
7    metadata: {
8      image: {
9        url: "/images/person.jpg",
10        title: "John Doe"
11      }
12    }
13  }}
14/>

import AuthorCard from '@/components/molecules/AuthorCard';

<AuthorCard 
  author={{
    title: "John Doe",
    url: "/person/john-doe",
    metadata: {
      image: {
        url: "/images/person.jpg",
        title: "John Doe"
      }
    }
  }}
/>

Features

Displays person avatar (40x40px, rounded)
Customizable label (defaults to "Author", can be set to "Participant" for live streams)
Links to person page if URL is provided
Supports CSLP for live preview editing

Custom Labels

The label prop allows you to customize the text displayed above the author's name:

1// Default: "Author"
2<AuthorCard author={author} />
3
4// Custom: "Participant"
5<AuthorCard author={author} label="Participant" />

// Default: "Author"
<AuthorCard author={author} />

// Custom: "Participant"
<AuthorCard author={author} label="Participant" />

Notes

Returns null if no person image is provided
Avatar is displayed as a circular image
Label uses cs-xs-body and person name uses cs-h6 typography variants