User

A component to display user info.

Usage

Preview

John Doe A cool dude

Code

UserExample.astro

---
import { User } from 'studiocms:ui/components/user';
---

<User name='John Doe' description='A cool dude' />

Avatar

You can provide an avatar using the same rules as the Image ⤴ component. To change the loading behavior, you can pass the loading attribute. It is passed to the <Image /> component.

Preview

John Doe A cool dude

Code

UserAvatarExample.astro

---
import { User } from 'studiocms:ui/components/user';
import ProfileImage from '~/assets/profile.png'
---

<User name='John Doe' loading='eager' description='A cool dude' avatar={ProfileImage} />