`card` element

Lays out one record: media, badge, title, subtitle, text and price, with actions underneath.

Renders

<article class="iwc-card"> with media, body and actions; linked when fields.link is set

Required

fields maps card slots to data paths.

Native apps

Web, and server-driven native apps

Syntax

card element

{ "type": "card" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Description
`fields`	`object {name: string}`	card mapping: title, subtitle, text, price, image, badge, link
`currency`	`string`	ISO currency for format=currency
`elements`	`array of element`
`data`	`object`	`aggregate`: `object` — summarise in the database: one record per group with its measures; sort by a group or measure name `as`: `string` — identifiers use letters, digits and '_' and do not start with a digit `cache`: `duration (500ms, 6s…)` — durations look like 500ms, 30s, 5m, 1h or 7d `columns`: `array of string` `filter`: `object {name: string \| number \| boolean \| null \| object}` `include`: `object {name: object}` — related records loaded with each record, one query per include: {"category": {}} or {"reviews": {"source": "DATABASE.reviews", "on": "product"}} `items`: `array of any` — inline records for STATIC sources `limit`: `integer (1–500)` `live`: `boolean` — re-render when the underlying records change (server push) `mode`: `"list" \| "single"` `paginate`: `object` `query`: `object {name: string \| number \| boolean \| null \| object}` — API sources: query values passed to the api (literals or {param\|query\|props} references) `refresh`: `duration (500ms, 6s…)` — durations look like 500ms, 30s, 5m, 1h or 7d `required`: `boolean` — page data: when nothing matches, the page answers 404 `search`: `object` `sort`: `object` `source`: `string` — sources are DATABASE.<schema>, API.<name>, STATIC, USER, STATE.<store>.<list> or an expression giving a list ("=product.images")
`item`	`element`

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Example

card example

{
  "type": "grid",
  "columns": 2,
  "gap": "16px",
  "data": {
    "source": "DATABASE.products",
    "columns": ["name", "maker", "price", "image", "slug"],
    "limit": 2
  },
  "item": {
    "type": "card",
    "fields": {
      "title": "name",
      "subtitle": "maker",
      "price": "price",
      "image": "image",
      "link": "/products/:slug"
    },
    "currency": "INR"
  }
}

fields keys: title, subtitle, text, price, image, badge, link. Each value is a data path; link may be a route pattern filled from the record.

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

Rendered HTML

<div class="iwc-page ipage" id="iwc-content">
  <div class="iwc-grid ie65311fa">
    <article class="iwc-card if1856301">
      <a class="iwc-card-link" href="/products/desk-lamp">
      <img class="iwc-card-media" data-bind-src="image" src="/assets/lamp.svg" alt="Desk Lamp" loading="lazy" decoding="async">
      <div class="iwc-card-body">
        <h3 class="iwc-card-title" data-bind="name">
          Desk Lamp
        </h3>
        <p class="iwc-card-subtitle">
          Lumen &amp; Oak
        </p>
        <p class="iwc-card-price" data-bind="price" data-format="currency" data-currency="INR">
          ₹2,499.00
        </p>
      </div>
      </a>
      <div class="iwc-card-actions">
      </div>
    </article>
    <article class="iwc-card if1856301">
      <a class="iwc-card-link" href="/products/stoneware-mug">
      <img class="iwc-card-media" data-bind-src="image" src="/assets/mug.svg" alt="Stoneware Mug" loading="lazy" decoding="async">
      <div class="iwc-card-body">
        <h3 class="iwc-card-title" data-bind="name">
          Stoneware Mug
        </h3>
        <p class="iwc-card-subtitle">
          Clay Studio
        </p>
        <p class="iwc-card-price" data-bind="price" data-format="currency" data-currency="INR">
          ₹649.00
        </p>
      </div>
      </a>
      <div class="iwc-card-actions">
      </div>
    </article>
  </div>
</div>

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.