User

The User component renders an inline profile badge consisting of an avatar, user name, optional role designation, and an optional hyperlink. It is built specifically to integrate seamlessly inside regular paragraphs, article bylines, or contributor lists.

Usage

The User component can be used in various configurations depending on your requirements. Below are step-by-step examples demonstrating each feature.

Default State

By default, if no attributes are provided, the component renders the name text along with an automated fallback placeholder avatar.

Published by :user[Bima Akbar]

Published by <User>Bima Akbar</User>

Custom Image Avatar

You can pass a direct image URL via the avatar attribute to display a custom circular profile picture.

Published by :user[Bima Akbar]{avatar="https://avatars.githubusercontent.com/u/81931118?v=4"}

Published by <User avatar="https://avatars.githubusercontent.com/u/81931118?v=4">Bima Akbar</User>

Add Role Description

Use the role attribute to append a job title or subtitle next to the name, automatically separated by a middle dot · symbol.

Published by :user[Bima Akbar]{avatar="https://avatars.githubusercontent.com/u/81931118?v=4" role="Developer"}

Published by <User avatar="https://avatars.githubusercontent.com/u/81931118?v=4" role="Developer">Bima Akbar</User>

Clickable Profile Link

​Add the url attribute to wrap the entire component inside a hyperlink anchor, allowing readers to click through to a profile, GitHub repository, or social media link.

Published by :user[Bima Akbar]{avatar="https://avatars.githubusercontent.com/u/81931118?v=4" url="https://github.com/bimaakbar-dev"}

Published by <User avatar="https://avatars.githubusercontent.com/u/81931118?v=4" url="https://github.com/bimaakbar-dev">Bima Akbar</User>

Attributes