User Profile Card

About this piece

Avatar with name, role, and a presence dot in emerald, amber, or slate.

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

MÖ

Merve ÖzkanProduct Designer

Usage

import { Card4 } from "@/components/beste/component/card4";

<Card4
  surface="card"
  bordered
  avatarSrc="https://images.unsplash.com/photo-1614283233556-f35b0c801ef1?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjI3fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
  avatarAlt="Merve Özkan"
  fallback="MÖ"
  name="Merve Özkan"
  role="Product Designer"
  status="online"
/>

Keyboard and gestures

Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.

Hover	The card lifts and the image scales inside its frame; `motion-reduce` turns the movement off.

Usage

The import and the props worth knowing about, in one place.

import { Card4 } from "@/components/beste/piece/card4";

<Card4
  surface="card"
  bordered={true}
  inverted={false}
  avatarSrc="https://images.unsplash.com/photo-1614283233556-f35b0c801ef1?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjI3fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
  avatarAlt="Merve Özkan"
  fallback="MÖ"
  name="Merve Özkan"
  role="Product Designer"
  status="online"
/>