---
title: Card
url: "https://native-sdk.dev/docs/components/card"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Use `card` for a bordered surface with elevation. Children stack on top of each other, so place a `column` or `row` inside for flow layout. The element rejects `gap`. Default padding is 24px, or 16px at `size="sm"`; set `padding` to override it. `on-press` makes the whole card pressable. Use [panel](/docs/components/panel) for a surface without the card treatment.

## Markup

```html
<card width="340">
  <column gap="12">
    <text>Deploy your app</text>
    <text wrap="true" foreground="text_muted">The runtime packages your views, commands, and assets into one native binary.</text>
    <row gap="8">
      <button variant="primary" on-press="deploy">Deploy</button>
      <button variant="ghost" on-press="cancel">Cancel</button>
    </row>
  </column>
</card>
```

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically:

```zig
ui.el(.card, .{ .width = 340 }, .{
    ui.column(.{ .gap = 12 }, .{
        ui.text(.{}, "Deploy your app"),
        ui.text(.{ .wrap = true, .style_tokens = .{ .foreground = .text_muted } }, "The runtime packages your views, commands, and assets into one native binary."),
        ui.row(.{ .gap = 8 }, .{
            ui.button(.{ .variant = .primary, .on_press = .deploy }, "Deploy"),
            ui.button(.{ .variant = .ghost, .on_press = .cancel }, "Cancel"),
        }),
    }),
})
```

## Attributes

| Attribute  | Description                                                                                                                                                                                                  |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `text`     | Text value for text-bearing elements; a literal or one \{binding}.                                                                                                                                           |
| `padding`  | Uniform padding (plain number).                                                                                                                                                                              |
| `width`    | Definite width (plain number): the element is exactly this wide; content neither shrinks nor overflows it. On resizable it is the initial width.                                                             |
| `on-press` | Dispatch a Msg on press: tag or tag:\{payload}. Legal on any element — a bound press handler makes it pressable, and presses on plain text/icons inside it fall through to it (dragging still selects text). |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)