MYT Platform - Card Components

Pixel-perfect implementation from Figma wireframes

Blank Card (Add Card State)

Click to start rapid fill - autofocus on Project Name, plus button for deliverables

Project Name

Add Creator/Deliverable

Main Cards

Displays project overview with social platform icons, creator names, and total value

Nike Campaign

Sarah Johnson, Mike Chen

Adidas Launch

Emma Wilson

Apple Event

James Taylor, Lisa Wang

Samsung Promo

Alex Smith

Quick Edit Card

Form for quick editing deliverables with dropdowns and fee calculations

Creator Fee:$0

Agency Fee:$0

Total:$0

Changing currency updates all deliverables on this card

Creator Fee:$7100

Agency Fee:$1420

2 x Reel

$3,000

3 x Branded post

$2,400

5 x Story

$1,200

1 x Dedicated video

$500

Total:$8520

Changing currency updates all deliverables on this card

Add Creator/Deliverable

Mobile Cards

Responsive card design optimized for mobile devices with full-width layout

Nike Campaign

Sarah Johnson, Mike Chen

$5,500

Sep 15

Adidas Launch

Emma Wilson

$3,200

Oct 20

Apple Event

James Taylor, Lisa Wang

$8,900

Oct 25

Samsung Promo

Alex Smith

$4,500

Nov 30

Quick Edit Card (Mobile Optimized)

The QuickEditCard automatically adapts to mobile with full-width layout and proper touch targets

Creator Fee:$2500

Agency Fee:$500

Total:$3000

Changing currency updates all deliverables on this card

Interactive Demo

Click blank card to edit, then save to see main card view

1. Start here →

Project Name

Add Creator/Deliverable

Design Specifications

Main Card

Size: 240px × 136px (fixed)
Background: #FFFEF8 (cream)
Border: 1px solid #EFEFEF
Border radius: 24px
Padding: 8px 16px
Social icons: 40px × 40px

Quick Edit Card

Width: 240px (min-width)
Background: #FFFEF8
Border radius: 24px
Box shadow: 0 4px 8px rgba(0,0,0,0.25)
Padding: 16px
Gap between elements: 8px