# Card

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

**URL:** https://inference.sh/docs/agents/widgets/card
**Last updated:** 2026-09-18

---

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

```go
import "inference.sh/common-go/pkg/models"

widget := &models.Widget{
    Type:  models.WidgetTypeUI,
    Title: "Card Title",
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeText, Value: "Card content goes here"},
    },
}
```

## 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

```go
widget := &models.Widget{
    Type:  models.WidgetTypeUI,
    Title: "Welcome",
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeText, Value: "Hello, world!"},
    },
}
```

### Card with Actions

```go
widget := &models.Widget{
    Type:  models.WidgetTypeUI,
    Title: "Confirm Delete",
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeText, Value: "Are you sure you want to delete this item?"},
    },
    Actions: []models.WidgetActionButton{
        {Label: "Cancel", Variant: "outline", Action: models.WidgetAction{Type: "cancel"}},
        {Label: "Delete", Variant: "destructive", Action: models.WidgetAction{Type: "delete"}},
    },
}
```

### Interactive Card with Form

```go
widget := &models.Widget{
    Type:        models.WidgetTypeUI,
    Title:       "Contact Form",
    Interactive: true,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeInput, Name: "name", Placeholder: "Your name"},
        {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "Your email"},
    },
    Actions: []models.WidgetActionButton{
        {Label: "Submit", Action: models.WidgetAction{Type: "submit"}},
    },
}
```

## 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

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