A bounded container for widgets. The Card is the primary container for all widget content.

Preview

A card displays content with an optional title and action buttons.

Usage

1import "inference.sh/common-go/pkg/models"2 3widget := &models.Widget{4    Type:  models.WidgetTypeUI,5    Title: "Card Title",6    Children: []models.WidgetNode{7        {Type: models.WidgetNodeTypeText, Value: "Card content goes here"},8    },9}

Props

Name	Type	Description	Default
`type`	`"ui" \| "html"`	Widget type	required
`title`	`string`	Title displayed in the card header	-
`interactive`	`boolean`	Whether the card contains interactive form elements	`false`
`children`	`WidgetNode[]`	Content nodes to render	-
`actions`	`WidgetActionButton[]`	Action buttons in the footer	-

Examples

Basic Card

1widget := &models.Widget{2    Type:  models.WidgetTypeUI,3    Title: "Welcome",4    Children: []models.WidgetNode{5        {Type: models.WidgetNodeTypeText, Value: "Hello, world!"},6    },7}

Card with Actions

1widget := &models.Widget{2    Type:  models.WidgetTypeUI,3    Title: "Confirm Delete",4    Children: []models.WidgetNode{5        {Type: models.WidgetNodeTypeText, Value: "Are you sure you want to delete this item?"},6    },7    Actions: []models.WidgetActionButton{8        {Label: "Cancel", Variant: "outline", Action: models.WidgetAction{Type: "cancel"}},9        {Label: "Delete", Variant: "destructive", Action: models.WidgetAction{Type: "delete"}},10    },11}

Interactive Card with Form

1widget := &models.Widget{2    Type:        models.WidgetTypeUI,3    Title:       "Contact Form",4    Interactive: true,5    Children: []models.WidgetNode{6        {Type: models.WidgetNodeTypeInput, Name: "name", Placeholder: "Your name"},7        {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "Your email"},8    },9    Actions: []models.WidgetActionButton{10        {Label: "Submit", Action: models.WidgetAction{Type: "submit"}},11    },12}

Styling

Cards automatically adapt to the theme (light/dark mode) and use the standard design system colors:

Background: card color from theme
Border: border color from theme
Title: foreground color with text-base size
Content: Standard text styling with space-y-3 gap

Best Practices

Keep titles concise - Titles should be 2-4 words
Limit actions - Maximum 3 action buttons for clarity
Use semantic variants - Use "destructive" for dangerous actions
Group related content - Use Row and Col for layout within cards