User Profile Card

Display key information about your users

Use the UserProfileCard component to showcase user identity with a banner, avatar, name, user handle, tags, and follower count. The make user data accessible and interactive in social, dashboard, or admin UIs.

Edit Profile ->

Frank Miller @frank.miller

Astro Svelte React

Contributor for @Webcore.

7 Following 1.3k Followers

<UserProfileCard
    avatar={{
        img: '/img/avatar0.png',
        size: 50
    }}
    name="Frank Miller"
    handle="@frank.miller"
    tags={['Astro', 'Svelte', 'React']}
    description="Contributor for <b>@Webcore</b>."
    editProfile={{
        show: true,
        href: '#',
        label: 'Edit Profile ->'
    }}
    follow={{
        followingCount: 7,
        followersCount: 1290
    }}
/>

The UserProfileCard component consist of the following sections:

• Banner with CTA: A gradient banner with a CTA that you can customize using the editProfile prop that accepts the following properties:
  • show: Defaults to false, you need to set this to true to show the button on the banner.
  • label: Sets the label on the button.
  • href: Sets the link for the button.
  • target: Sets the target of the link.
• Avatar: A user avatar that can be changed using the avatar prop. This object accepts properties in the form of AvatarProps
• User info: User information is shown below the avatar and can be configured with the name, handle, tags, and description props.
• Followers: Follower count and text can be configured using the follow prop. Numbers are automatically formatted for improved readability.

You can use many different props to customize the appearance of your user profile cards. However, the only required prop for the component is called name, in which case some default values will be rendered:

Customizing Banners

By default, the banner is displayed with gradient colors. You can customize these colors using the following CSS variables:

html body {
    --w-user-profile-card-start-color: #1CAED7;
    --w-user-profile-card-end-color: #4E00C2;
}

This will set the default gradient colors for all UserProfileCard components. The colors can also be set on individual cards using the banner.fromColor and banner.toColor props:

Frank Miller @frank.miller

Astro Svelte React

Contributor for @Webcore.

7 Following 1.3k Followers

Frank Miller @frank.miller

Astro Svelte React

Contributor for @Webcore.

7 Following 1.3k Followers

Frank Miller @frank.miller

Astro Svelte React

Contributor for @Webcore.

7 Following 1.3k Followers

<UserProfileCard
    ...
    banner={{
        fromColor: 'var(--w-color-success)',
        toColor: 'var(--w-color-info)'
    }}
/>

You can also display images inside the banner by specifying a src attribute instead. (You can provide alt, width, height and lazy attributes to the banner prop to customize the way your banner image is rendered):

Frank Miller @frank.miller

Astro Svelte React

Contributor for @Webcore.

7 Following 1.3k Followers

<UserProfileCard
    ...
    banner={{ src: '/path/to/img.png' }}
/>

Configuring Followers

The follower count is automatically displayed when using the component. This section can be toggled off by setting the follow.showFollowing and follow.showFollowers props to false. You can also configure the text to translate them with the follow.followingText and follow.followersText props:

User profile with no followers @frank.miller

Astro Svelte React

Contributor for @Webcore.

User profile with translated followers @frank.miller

Astro Svelte React

Contributor for @Webcore.

7 Subscriptions 1.3k Subscribers

<UserProfileCard
    ...
    follow={{
        showFollowing: false,
        showFollowers: false
    }}
/>

<UserProfileCard
    ...
    follow={{
        followingCount: 7,
        followersCount: 1290,
        followingText: 'Subscriptions',
        followersText: 'Subscribers'
    }}
/>

Showing Additional Content

To show additional content inside your user profile card, simply pass your elements as the children to the component. For example, you can display reviews inside the card in the following way to create rich user-rating cards:

Frank Miller @frank.miller

Astro Svelte React

Contributor for @Webcore.

7 Following 1.3k Followers

Most helpful review: ★★★★★

Last reviewed: 2025. 02. 15.

Absolutely fantastic creator! The quality exceeded my expectations, and the customer support was super helpful. Highly recommend!

Verified User

<UserProfileCard ...>
    <Review
        element="div"
        compact={true}
        review={{
            name: 'Most helpful review:',
            date: 'Last reviewed: 2025. 02. 15.',
            description: 'Absolutely fantastic creator! The quality exceeded my expectations, and the customer support was super helpful. Highly recommend!',
            rating: {
                score: 5,
                color: 'var(--w-color-warning)'
            }
        }}
        verifiedText="Verified User"
    />
</UserProfileCard>

API

type UserProfileCardProps = {
    avatar?: AvatarProps
    editProfile?: {
        show?: boolean
        label?: string
        href: string
        target?:
            | '_self'
            | '_blank'
            | '_parent'
            | '_top'
            | '_unfencedTop'
    }
    banner?: {
        src?: string
        alt?: string
        width?: number
        height?: number
        lazy?: boolean
        fromColor?: string
        toColor?: string
    }
    name: string
    handle?: string
    tags?: string[]
    description?: string
    follow?: {
        showFollowing?: boolean
        showFollowers?: boolean
        followingCount?: number
        followersCount?: number
        followingText?: string
        followersText?: string
    }
    className?: string
}