Author

Display author information with avatar, name, and social links

npm create webcore@latest add Author

Use the Author component to display information about an author, including their name, photo, bio, and social links. They add trust and authenticity to content and allow readers to connect with the author through social links. They can also help you to credit authors.

Jake Brown Astro developer

Description about the author, including previous work experiences, studies, and projects. Anything that can establish credibility, experience, and expertise should be listed here to instill trustworthiness in the reader. Supports HTML tags.

<Author
    img={{
        src: '/img/author.png',
        alt: 'Jake',
        size: 50
    }}
    name="Jake Brown"
    role="Astro developer"
    description="Description about the author..."
    socials={{
        links: [
            'https://linkedin.com',
            'https://x.com',
            'https://github.com'
        ]
    }}
/>

The Author component expects the following list of props:

• name: Sets the name of the author.
• role: Sets a role for the author that is shown under the name.
• description: Sets a short introductory description about the author. Support the use of HTML tags.
• img: Sets an avatar for the author. The img prop expects an object in the form of AvatarProps along with a src property.

Optionally, you can also add social media links using the socials prop as shown in the above example. The socials prop expects a SocialsProps object.

Different Types

The Author component is built on top of the Card component, meaning you can extend your component with Card-specific props. For example, you can use the title, secondary, or compact props to get different visuals:

About the Author

Jake Brown Astro developer

Secondary card with title.

Jonathan Miller React developer

Compact card without title.

<Author
    title="About the Author"
    secondary={true}
    ...
/>

<Author
    compact={true}
    ...
/>

API

type AuthorProps = {
    name: string
    role: string
    description: string
    socials?: SocialsProps
    img: {
        src: string
    } & Omit<AvatarProps, 'img'>
} & CardProps