[Contexts](https://oods-foundry.com/contexts) / card # card An object as a card. Generated from @oods/foundry 0.10.1 ## The same context across several objects Each is its object's generated screen in this context, in React and Vue, with the calls that made it. Open an object for its other contexts. [User card screen generated by OODS Foundry in React](https://oods-foundry.com/objects/user/screens/card-react) React app · sample records Maturity: stable `sha256:b219ce1b0b27…` [Open full size: User card screen generated by OODS Foundry in React](https://oods-foundry.com/objects/user/screens/card-react) Vue app · sample records Maturity: stable `sha256:6926a444ef37…` [Open full size: User card screen generated by OODS Foundry in Vue](https://oods-foundry.com/objects/user/screens/card-vue) React app · sample records Maturity: beta `sha256:b36593ed2fe6…` [Open full size: Invoice card screen generated by OODS Foundry in React](https://oods-foundry.com/objects/invoice/screens/card-react) Vue app · sample records Maturity: beta `sha256:0a33320e888f…` [Open full size: Invoice card screen generated by OODS Foundry in Vue](https://oods-foundry.com/objects/invoice/screens/card-vue) React app · sample records Maturity: beta `sha256:50c03b1c0cd3…` [Open full size: Plan card screen generated by OODS Foundry in React](https://oods-foundry.com/objects/plan/screens/card-react) Vue app · sample records Maturity: beta `sha256:0838fc45e1e2…` [Open full size: Plan card screen generated by OODS Foundry in Vue](https://oods-foundry.com/objects/plan/screens/card-vue) React app · sample records Maturity: beta `sha256:866a723c1228…` [Open full size: Subscription card screen generated by OODS Foundry in React](https://oods-foundry.com/objects/subscription/screens/card-react) Vue app · sample records Maturity: beta `sha256:2fde60af3a38…` [Open full size: Subscription card screen generated by OODS Foundry in Vue](https://oods-foundry.com/objects/subscription/screens/card-vue) The calls that made the User card apps, in React and Vue 3 calls, as the pipeline sent them ``` design_compose { "object": "User", "context": "card", "preferences": { "brand": "Aquex", "theme": "light" } } code_generate { "schemaRef": "compose-bc25e7e3", "framework": "react", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } code_generate { "schemaRef": "compose-bc25e7e3", "framework": "vue", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } ``` The React app's content hash: `sha256:b219ce1b0b274d1ec7ba8d5fe6d1aa7eee366d841c504acb203b28f9869376eb`. Its `src/` folder: App.tsx, GeneratedUI.tsx, app.css, main.tsx, oods-brand-aquex.css The Vue app's content hash: `sha256:6926a444ef3777826dfe4eb356e695214d5b0360c6c659f755ca93babd9d5687`. Its `src/` folder: App.vue, GeneratedUI.vue, app.css, main.ts, oods-brand-aquex.css What `design_compose` reported: - `OODS-V121` Object 'Invoice' has maturity 'beta' — composed output may change. The calls that made the Invoice card apps, in React and Vue 3 calls, as the pipeline sent them ``` design_compose { "object": "Invoice", "context": "card", "preferences": { "brand": "Aquex", "theme": "light" } } code_generate { "schemaRef": "compose-b71d7dd5", "framework": "react", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } code_generate { "schemaRef": "compose-b71d7dd5", "framework": "vue", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } ``` The React app's content hash: `sha256:b36593ed2fe63b1eb4a4fbf11ef17f6866c9160196362462dfef7b16ed7173f2`. Its `src/` folder: App.tsx, GeneratedUI.tsx, app.css, main.tsx, oods-brand-aquex.css The Vue app's content hash: `sha256:0a33320e888f501a38107bfd22131017c3fdf83f316de953b8093310a24a5803`. Its `src/` folder: App.vue, GeneratedUI.vue, app.css, main.ts, oods-brand-aquex.css What `design_compose` reported: - `OODS-V121` Object 'Plan' has maturity 'beta' — composed output may change. The calls that made the Plan card apps, in React and Vue 3 calls, as the pipeline sent them ``` design_compose { "object": "Plan", "context": "card", "preferences": { "brand": "Aquex", "theme": "light" } } code_generate { "schemaRef": "compose-4dba6e5a", "framework": "react", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } code_generate { "schemaRef": "compose-4dba6e5a", "framework": "vue", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } ``` The React app's content hash: `sha256:50c03b1c0cd3b2ddf139070acde71e7e5daa3d4a8936cbf0897a950607015a9c`. Its `src/` folder: App.tsx, GeneratedUI.tsx, app.css, main.tsx, oods-brand-aquex.css The Vue app's content hash: `sha256:0838fc45e1e2dfbff88234c982beafb4d9a476b5f5bb68a220e4a9b133304c3e`. Its `src/` folder: App.vue, GeneratedUI.vue, app.css, main.ts, oods-brand-aquex.css What `design_compose` reported: - `OODS-V121` Object 'Subscription' has maturity 'beta' — composed output may change. - `OODS-V117` Subscription refines 11 fields its traits define, and its own definitions are used: lifecycle/Stateful (status); lifecycle/Cancellable (cancel_at_period_end, cancellation_reason, cancellation_requested_at); financial/Billable (amount, currency, billing_interval, current_period_start, current_period_end, current_period_progress, next_payment_due_at). The calls that made the Subscription card apps, in React and Vue 3 calls, as the pipeline sent them ``` design_compose { "object": "Subscription", "context": "card", "preferences": { "brand": "Aquex", "theme": "light" } } code_generate { "schemaRef": "compose-a7a13ca7", "framework": "react", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } code_generate { "schemaRef": "compose-a7a13ca7", "framework": "vue", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } ``` The React app's content hash: `sha256:866a723c122818699f0fa176f3241a8d621288a23692561416fbd3c27d0f838c`. Its `src/` folder: App.tsx, GeneratedUI.tsx, app.css, main.tsx, oods-brand-aquex.css The Vue app's content hash: `sha256:2fde60af3a3855e2ee0d09fbee81ad4349842cdeaa5f881c8d7d4b7ebaf209a4`. Its `src/` folder: App.vue, GeneratedUI.vue, app.css, main.ts, oods-brand-aquex.css ## What traits place here - [Archivable](https://oods-foundry.com/traits/archivable) `ArchivePill` - [Assessable](https://oods-foundry.com/traits/assessable) `StatusBadge` - [Billable](https://oods-foundry.com/traits/billable) `BillingCardMeta` - [Cancellable](https://oods-foundry.com/traits/cancellable) `CancellationBadge` - [Colorized](https://oods-foundry.com/traits/colorized) `ColorizedBadge` - [Labelled](https://oods-foundry.com/traits/labelled) `CardHeader` - [Ownerable](https://oods-foundry.com/traits/ownerable) `OwnershipMeta` - [Priceable](https://oods-foundry.com/traits/priceable) `PriceBadge` - [Provenanced](https://oods-foundry.com/traits/provenanced) `Text`, `RelativeTimestamp` - [SaaSBillingBillable](https://oods-foundry.com/traits/saas-billing-billable) `BillingCardMeta` - [SaaSBillingPayable](https://oods-foundry.com/traits/saas-billing-payable) `BillingSummaryBadge` - [Stateful](https://oods-foundry.com/traits/stateful) `StatusBadge` - [Supersedable](https://oods-foundry.com/traits/supersedable) `StatusBadge` - [Taggable](https://oods-foundry.com/traits/taggable) `TagPills` ## Objects that compose in it - [Article](https://oods-foundry.com/objects/article#screen-card) - [Invoice](https://oods-foundry.com/objects/invoice#screen-card) - [Media](https://oods-foundry.com/objects/media#screen-card) - [Organization](https://oods-foundry.com/objects/organization#screen-card) - [Plan](https://oods-foundry.com/objects/plan#screen-card) - [Product](https://oods-foundry.com/objects/product#screen-card) - [Relationship](https://oods-foundry.com/objects/relationship#screen-card) - [Subscription](https://oods-foundry.com/objects/subscription#screen-card) - [Transaction](https://oods-foundry.com/objects/transaction#screen-card) - [Usage](https://oods-foundry.com/objects/usage#screen-card) - [User](https://oods-foundry.com/objects/user#screen-card)