Team Reveal Card

About this component

A team member card with a grayscale portrait that gains color on hover while a bio drawer slides up.

Usage

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

import { Card8 } from "@/components/beste/component/card8";

// Hover or keyboard focus slides the drawer up and colors the portrait.
<Card8
  src="/team/deniz.jpg"
  name="Deniz Arslan"
  role="Creative Director"
  bio="Leads brand systems for venture backed startups."
  href="/team/deniz"
/>

<Card8
  src="/team/elif.jpg"
  name="Elif Kaya"
  role="Engineering Lead"
  colored              // skip the grayscale treatment
  linkLabel="Say hi"
  href="mailto:[email protected]"
  tone="foreground"    // link accent: "primary" (default) | "foreground"
/>

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.

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`src`*	`string`	—	Portrait image URL
`name`*	`string`	—	Person's name
`role`*	`string`	—	Role or title
`bio`	`string`	—	Short bio revealed when the drawer slides up
`href`	`string`	—	Profile link shown at the bottom of the drawer
`linkLabel`	`string`	—	Drawer link label (defaults to "View profile")
`colored`	`boolean`	—	Keep the portrait in color instead of the grayscale-to-color hover
`tone`	`"primary" \| "foreground"`	—	Link accent color
`className`	`string`	—	Additional classes merged onto the root

More Card components

View all Card

Brand systems

Identity, guidelines, and design tokens that scale across every touchpoint of your product.

Explore service

Brand identityNordwind Studio

Featured

Pro blocks drop monthly

A new themed set of sections lands every month, with free updates forever.

Learn more