ProfileHeader

Profile card with a cover image, a large avatar, a name and meta chips.

Jump to API reference

Import

Vue
import { UiProfileHeader } from '@ziyarago/ui/vue'

Guide profile

Fatima Noor
Fatima Noor
MakkahEnglish, Uzbek4.9 rating
Vue
<UiProfileHeader
  name="Fatima Noor"
  src="/3d/guide.png"
  cover="/3d/kaaba.png"
  :meta="[{ icon: 'map-pin', label: 'Makkah' }, { icon: 'languages', label: 'English, Uzbek' }, { icon: 'star', label: '4.9 rating' }]"
 />

API reference

Profile card with a cover image, large avatar, name and a row of meta items.

Props

PropType and valuesDefaultDescription
namerequiredstring—Person or organization name.
srcstring—Avatar image URL; initials are shown without it.
coverstring—Cover image URL.
meta{ icon: string; label: string }[][]Facts under the name such as location or join date. label must be unique.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultExtra content on the right of the name row, usually action buttons.