Back to playground
→Expanded→
Product Card
E-commerce card with floating add-to-cart interaction and quantity controls.
e-commerceinteraction
Product Grid
0 items in cart$0.00
0
0
Goodles Dry Pasta Curveballs
8 oz - Protein-packed pasta with nutrients
$2.99$3.49
0
0
Junkless Granola Bars
Chocolate Chip Chewy - 6.6oz/6ct
$4.49$5.29
0
0
Poppi Wild Berry Soda
Prebiotic Soda - 12 fl oz Can
$2.29
0
0
Recess Mood Sparkling Water
Tropical Bliss with Magnesium - 12 fl oz
$3.49
Interaction Guide
Add to Cart: Click the + button on any product to add it to your cart.
Adjust Quantity: After adding, use the − and + buttons to adjust quantity.
Direct Input: Click the quantity number to type a specific amount (1-99).
Auto-Collapse: Controls automatically collapse after 5 seconds of inactivity. Click the badge to expand again.
Max Limit: Try entering a quantity over 99 to see the warning tooltip.
State Machine
+
Empty−
1
+
1
Collapsed