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

$0

Main Cards

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

Nike Campaign

Sarah Johnson, Mike Chen

$5,500

Adidas Launch

Emma Wilson

$3,200

Apple Event

James Taylor, Lisa Wang

$8,900

Samsung Promo

Alex Smith

$4,500

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
SJ
2 x Reel
$3,000
MC
3 x Branded post
$2,400
EW
5 x Story
$1,200
JT
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

Adidas Launch

Emma Wilson

$3,200

Apple Event

James Taylor, Lisa Wang

$8,900

Samsung Promo

Alex Smith

$4,500

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

$0

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