Profile

Low-level building blocks for constructing identity layouts with avatar, name, title and custom content.

Justice Chimobi

Frontend Engineer

import { Avatar, Profile } from '@fidely-ui/react'

export const ProfileBasics = () => {
  return (
    <Profile.Root>
      <Profile.AvatarWrapper>
        <Avatar.Root>
          <Avatar.Fallback name="Justice Chimobi" />
          <Avatar.Image src="/justice-chimobi.jpeg" />
        </Avatar.Root>
      </Profile.AvatarWrapper>

      <Profile.Details>
        <Profile.Name>Justice Chimobi</Profile.Name>
        <Profile.Title>Frontend Engineer</Profile.Title>
      </Profile.Details>
    </Profile.Root>
  )
}

Usage

import { Avatar, Profile } from '@fidely-ui/react'

<Profile.Root>
  <Profile.AvatarWrapper>
    <Avatar.Root>
      <Avatar.Fallback />
      <Avatar.Image />
    </Avatar.Root>
  </Profile.AvatarWrapper>

  <Profile.Details>
    <Profile.Name />
    <Profile.Title />
  </Profile.Details>
</Profile.Root>

Horizontal Layout

Use the default layout to display the avatar beside the text.

Leanne Graham

harness real-time e-markets

import { Avatar, Profile } from '@fidely-ui/react'

export const ProfileHorizontal = () => {
  return (
    <Profile.Root orientation="horizontal">
      <Profile.AvatarWrapper>
        <Avatar.Root>
          <Avatar.Fallback name="Leanne Graham" />
          <Avatar.Image src="http://bit.ly/47jPX1D" />
        </Avatar.Root>
      </Profile.AvatarWrapper>

      <Profile.Details>
        <Profile.Name>Leanne Graham</Profile.Name>
        <Profile.Title>harness real-time e-markets</Profile.Title>
      </Profile.Details>
    </Profile.Root>
  )
}

Vertical Layout

Use the orientation="vertical" prop to stack the avatar above the text.

Leanne Graham

harness real-time e-markets

import { Avatar, Profile } from '@fidely-ui/react'

export const ProfileVertical = () => {
  return (
    <Profile.Root orientation="vertical">
      <Profile.AvatarWrapper>
        <Avatar.Root>
          <Avatar.Fallback name="Leanne Graham" />
          <Avatar.Image src="http://bit.ly/47jPX1D" />
        </Avatar.Root>
      </Profile.AvatarWrapper>

      <Profile.Details>
        <Profile.Name>Leanne Graham</Profile.Name>
        <Profile.Title>harness real-time e-markets</Profile.Title>
      </Profile.Details>
    </Profile.Root>
  )
}

Custom Sizes

Adjust the avatar, name and title size using the size prop.

Leanne Graham

harness real-time e-markets

import { Avatar, Profile } from '@fidely-ui/react'

export const ProfileSizes = () => {
  return (
    <Profile.Root>
      <Profile.AvatarWrapper>
        <Avatar.Root size="lg">
          <Avatar.Fallback name="Leanne Graham" />
          <Avatar.Image src="http://bit.ly/47jPX1D" />
        </Avatar.Root>
      </Profile.AvatarWrapper>

      <Profile.Details>
        <Profile.Name textStyle="md">Leanne Graham</Profile.Name>
        <Profile.Title textStyle="sm">
          harness real-time e-markets
        </Profile.Title>
      </Profile.Details>
    </Profile.Root>
  )
}

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Defines the layout direction of the Profile component.