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:elif@studio.co"
  tone="foreground"    // link accent: "primary" (default) | "foreground"
/>

Playground

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

Deniz Arslan

Creative Director

Leads brand systems for venture backed startups. Previously at North & Co.

View profile

Usage

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

<Card8
  src="https://images.unsplash.com/photo-1782754569214-aafb970bc6b1?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  name="Deniz Arslan"
  role="Creative Director"
  bio="Leads brand systems for venture backed startups. Previously at North & Co."
  href="#"
/>

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

Flip Card

A 3D flip card that rotates on hover to reveal details and a link for service and feature grids.

Brand identityNordwind Studio

Portfolio Card

A portfolio card with a full bleed image, hover zoom, and gradient title overlay for work showcases.

Featured

Pro blocks drop monthly

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

Learn more

Gradient Beam Card

A featured callout card wrapped in an orbiting gradient border beam for highlights and announcements.

24 photosStudio offsite

Photo Stack Card

A photo stack card whose tucked prints fan out on hover for albums, galleries, and case studies.

Beste Conf 2027

Deniz Arslan

Creative Director

Speaker

ATT-0087

Lanyard Badge Card

A conference lanyard badge card with strap, portrait, access tag, and barcode that sways on hover.

Join the beta program

We are opening a short testing window for the new builder. Help shape it before launch.

Only 25 seats

Applications close Jul 18.

Request access

Promo Card

A dismissible promo card with image, deadline line, and apply button for programs and offers.