User

Usage

Jane Doe Product Designer

Expand code

<LumexUser Name="Jane Doe" Description="Product Designer">
	<AvatarContent>
		<LumexAvatar Src="https://i.pravatar.cc/150?img=2" />
	</AvatarContent>
</LumexUser>

Custom Description

Use the DescriptionContent parameter to provide custom content for the user description.

Dan @desmondinho

Expand code

<LumexUser Name="Dan">
	<AvatarContent>
		<LumexAvatar Src="https://avatars.githubusercontent.com/u/68395709?v=4" />
	</AvatarContent>
	<DescriptionContent>
		<LumexLink Href="https://github.com/desmondinho" External="@true">
          @@desmondinho
        </LumexLink>
	</DescriptionContent>
</LumexUser>

Custom styles

This component supports named slots, which allow custom styles to be applied to specific parts of the component:

• Base: The base slot of the user, it is the main container.
• Wrapper: The name and description wrapper.
• Name: The name of the user.
• Description: The description of the user.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

• <LumexUser />
• <LumexAvatar />
• <LumexLink />