Card macrolite

A bordered content card with an optional title and description; use it for grouped content, not page headers.

Built from: Box Text
A2UI basic: Card
Children: many

Preview

Loading the renderer…

title

description

padded

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Card",
          "title": "Overview",
          "description": "Your account summary",
          "children": [
            "c0-t",
            "c0-b"
          ]
        },
        {
          "id": "c0-t",
          "component": "Text",
          "text": "3 open issues · 2 in review",
          "variant": "body"
        },
        {
          "id": "c0-b",
          "component": "Button",
          "label": "Open board",
          "variant": "outline"
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Card rendered by the React renderer on Web — **Web** React

Card rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Card rendered by the Compose renderer on Android — **Android** Compose

Card rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-card, painted by each native renderer.

Props

Prop	Type	Default	Description
`title`	`string`	–	The card heading.
`description`	`string`	–	A muted line under the heading.
`padded`	`boolean`	`true`	Pads the body; off for edge-to-edge rows.
`style`	`style`	–	Extra Box styles merged over the card's own.

Events and slots

No events, no slots. Children: many.

Accessibility

Role: group
Semantics: group labelled by its title

Not focusable; no keys.

Theming

Recipe parts: Card/rootCard/headerCard/titleCard/descriptionCard/body
Keyed by: :hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Glass card

The ONE translucent card, and only its box: radius XL, the card hairline, the glass card fill.

Everything a card owns on its own stays at the call site, because those genuinely differ — its padding, a blur, a shadow, and the divide-y + overflow hidden that turns the same box into a GROUP of rows. EXP-903: five surfaces painted it by copy-paste (the comment row, the agent AskCard, the usage card, the mobile issue properties sheet and the repo picker, which had drifted to the MD corner and the bare hairline). The shadcn Card derives its recipe from the same constant, so the two cannot disagree; a group of list ROWS is the group container instead, on the row fill with no outer stroke.

Webok

GlassCard / GLASS_CARD_CLASSpackages/ui/src/glass-card.tsx

Card (./card.tsx) derives its own recipe from the same constant.

iOSok

GlassCardapps/ios/ExpUI/Sources/GlassTheme.swift

Androidok

Modifier.glassCard()apps/android/app/src/main/java/com/exponential/app/ui/theme/Glass.kt

Desktopok

surface::glass_cardapps/desktop/crates/ui/src/surface.rs