🚧 This website is work in progress 👷
Components
Structure
User

User

User

Editable Example

import {} from "@wfp/react";

() => {
  return (
    <tr
      image="https://www.wfp.org/sites/default/files/styles/page_accordion/public/images/ourwork_humanitarian.jpg?itok=R0ymBwxH"
      name="Max Mustermann"
      showName
    />
  );
};
PropDefaultDescriptionValue

alt

string
–

The alt-text of the avatar

ellipsis

boolean
–

Sets the max-width of the user name to 130px and shows an ellipsis

description

ReactNode
–

Additional description under the Name will also increase the size of the Avatar use <List kind="simple" small /> as default content

components

–

Optional components to replace the default ones, the Icon component is used for the avatar

extendedDescription

ReactNode
–

Extended Description column

missingImage

"avatar" |"letter"
–

Selects the generated empty icon if no image is provided. Can be avatar or letter.

image

string
–

Url to an avatar image The size of the image is 25px * 25px. Provide at least 50px * 50px to support HiDPI displays.

showName

boolean
–

Show the name next to the avatar

className

string
–

The CSS class name for the user.

small

boolean
–

Shows a smaller version of the user

name

string
–

The username which will be displayed. Usually Firstname Lastname.

On this page

References