ruucm-working

--- a/material-button-types.framerfx/code/MaterialButton.tsx
+++ b/material-button-types.framerfx/code/MaterialButton.tsx
@@ -7,7 +7,11 @@ window.log = console.log

 export function MaterialButton(props) {
   log('props', props)
-  return <Frame>{props.text}</Frame>
+  if (props.type == 'text') return <Frame>{props.text}</Frame>
+  else if (props.type == 'outlined')
+    return <Frame background="red">{props.text}</Frame>

ruucm-working

--- a/material-button-types.framerfx/code/MaterialButton.tsx
+++ b/material-button-types.framerfx/code/MaterialButton.tsx
@@ -12,8 +12,16 @@ export function MaterialButton(props) {

 MaterialButton.defaultProps = {
   text: 'BUTTON',
+  type: 'text',
 }

 addPropertyControls(MaterialButton, {

ruucm-working

--- /dev/null
+++ b/material-button-types.framerfx/code/MaterialButton.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { Frame, useCycle, addPropertyControls, ControlType } from 'framer'
+
+// Open Preview (CMD + P)
+// API Reference: https://www.framer.com/api
+window.log = console.log
+

ruucm-working

--- a/product-card.framerfx/code/List.tsx
+++ b/product-card.framerfx/code/List.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react'
 import { Frame, useCycle, Stack } from 'framer'
 import { Card } from './Card'
+import { url } from 'framer/resource'

 export function List() {
   return (

ruucm-working

--- a/product-card.framerfx/code/List.tsx
+++ b/product-card.framerfx/code/List.tsx
@@ -1,18 +1,13 @@
 import * as React from 'react'
 import { Frame, useCycle, Stack } from 'framer'
+import { Card } from './Card'

 export function List() {
   return (
-    <Stack

ruucm-working

--- /dev/null
+++ b/product-card.framerfx/code/List.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { Frame, useCycle, Stack } from 'framer'
+
+export function List() {
+  return (
+    <Stack
+      gap={0}

ruucm-working

--- a/product-card.framerfx/code/Card.tsx
+++ b/product-card.framerfx/code/Card.tsx
@@ -17,9 +17,7 @@ export function Card(props) {
       <Frame
         width="100%"
         height="60%"
-        background={
-          'center / contain no-repeat url(' + url('/images/a.png') + ')'
-        }
+        background={'center / contain no-repeat url(' + props.image + ')'}

ruucm-working

--- a/product-card.framerfx/code/Card.tsx
+++ b/product-card.framerfx/code/Card.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Frame, useCycle, Stack } from 'framer'
 import { url } from 'framer/resource'

-export function Card() {
+export function Card(props) {
   return (
     <Stack

ruucm-working

--- a/product-card.framerfx/code/Card.tsx
+++ b/product-card.framerfx/code/Card.tsx
@@ -4,7 +4,16 @@ import { url } from 'framer/resource'

 export function Card() {
   return (
-    <Stack gap={0} width="100%" height="100%" background="pink">
+    <Stack
+      gap={0}
+      width="100%"

ruucm-working

--- a/product-card.framerfx/code/Card.tsx
+++ b/product-card.framerfx/code/Card.tsx
@@ -12,7 +12,29 @@ export function Card() {
           'center / contain no-repeat url(' + url('/images/a.png') + ')'
         }
       />
-      <Frame background="blue" width="100%" height="40%" />
+      <Frame background="blue" width="100%" height="40%">
+        <span
+          style={{