---
title: "ZingGrid Web Component: `<zg-card>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-card>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/v1/api/tags/zg-card
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-card.md
mode: provenance
representation: markdown
origin_response_id: 4c05a21a8b7799afc5226fd6c92a74cb
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.751Z
version_nonce: 4e95008eba4307788f9732c5c81a7bfb
generated_at_utc: 2026-11-04T07:42:46.772Z
response_nonce: 5c745c99917ff84d956afc4d581d7655
```

# `<zg-card>`

Version 1

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/zg-card--docs)

The `<zg-card>` tag is a web component that controls the styling and display for the mobile view (card mode) of the grid.

![Image of the DOM relationship for the zg-card web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-card-web-component-dom.png "Image of the DOM relationship for the zg-card web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Manual | n/a |
| [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Manual | n/a |
| [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Manual | n/a |
| [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Manual | n/a |
| [ZGInput](https://www.zinggrid.com/docs/api/tags/zg-input) | Child | Manual | n/a |
| [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Child | Manual | n/a |
| [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Manual | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-body>`](https://www.zinggrid.com/docs/api/tags/zg-body/)
- [`<zg-cell>`](https://www.zinggrid.com/docs/api/tags/zg-cell/)
- [`<zg-column>`](https://www.zinggrid.com/docs/api/tags/zg-caption/)

## Usage

A `<zg-card>` tag can be manually inserted inside the grid as slotted content or automatically inserted when in mobile view.

```html
<zing-grid
  layout="card"
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-card>
    <!-- Optional template tag -->
    <template>
      <h3>[[record.name]]</h3>
      <code>[[record.job]]</code>
    </template>
  </zg-card>
</zing-grid>
```

You can also use the `renderer-template` attribute to reference an external template, like so:

```html
<zing-grid
  layout="card"
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-card renderer-template="zingGridCustomCard"></zg-card>
</zing-grid>

<template id="zingGridCustomCard">
  <h3>[[record.name]]</h3>
  <code>[[record.job]]</code>
</template>
```

## Attributes

There are a couple attributes to hook into the `<zg-card>` lifecycle. These lifecycle hooks are for rendering and editing.

**Example Usage:**

```html
<zing-grid
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-card renderer="fncCallAfterTemplateTagInserted">
    <!-- Optional template tag -->
    <template>
      <h3>[[record.name]]</h3>
      <code>[[record.job]]</code>
    </template>
  </zg-card>
</zing-grid>
```

### editor

Sets the custom editor

- Type: function
- Default: `""`
- Accepted values: "editorVariable"
- Supported versions: 2.x

[Example code](https://app.zingsoft.com/demos/embed/9U5NHFD0)

### editor-template

Points to an external template element to be used as the template for the card's editor.

- Type: function
- Default: `""`
- Accepted values: "templateId"
- Supported versions: 2.x

[Example code](https://app.zingsoft.com/demos/embed/ZZE452WJ)

### renderer

The return value of the method is set as the innerHTML of `<zg-card>`. If nothing is returned, it will not change the currently rendered card. The method takes the paramters `data`, `domCard`, and `rowObject`.

- Type: function
- Default: `""`
- Accepted values: "<p>Card content</p>"
- Supported versions: 2.x

[Example code](https://app.zingsoft.com/demos/embed/B9BRAX0F)

### renderer-template

Points to an external template element to be used as the template for the card's render.

- Type: function
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 2.x

[Example code](https://app.zingsoft.com/demos/embed/ZBBH3JRQ)

## CSS Variables
`<zg-card>` can be styled with CSS variables, like so:

```css
:root {
  --zg-cell-background_layout_card: red;
}
```

Below is a list of all the associated `--zg-card` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |
| `--zg-cell-background_layout_card` | Browser's default value | Styles the background of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/BEYZ88MV) |
| `--zg-cell-border_layout_card` | 0 | Styles the border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/U0CW9K8N) |
| `--zg-cell-border-bottom_layout_card` | var(--zg-card-border, 0) | Styles the bottom border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/FGN7V34Y) |
| `--zg-cell-border-left_layout_card` | var(--zg-card-border, 0) | Styles the left border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/BPYBZ5YQ) |
| `--zg-cell-border-right_layout_card` | var(--zg-card-border, 0) | Styles the right border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/CK9N7ZQV) |
| `--zg-cell-border-top_layout_card` | var(--zg-card-border, 0) | Styles the top border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/7Y7BXZCF) |
| `--zg-cell-color_layout_card` | inherit | Sets the font color of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/X2B23BUZ) |
| `--zg-cell-font-family_layout_card` | inherit | Sets the font family of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/O9LB0E7K) |
| `--zg-cell-font-size_layout_card` | inherit | Sets the font size of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/FN82MG62) |
| `--zg-cell-font-style_layout_card` | inherit | Sets the font family of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/OOAIYJ3A) |
| `--zg-cell-font-weight_layout_card` | inherit | Sets the font weight of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/HG4U54X7) |
| `--zg-cell-height_layout_card` | auto | Sets the height of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/363ZH0L0) |
| `--zg-cell-line-height_layout_card` | inherit | Sets the line height of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/GNXXL0I8) |
| `--zg-cell-padding_layout_card` | var(--theme-padding_y) var(--theme-padding_x) | Sets the padding of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/NLQRJG8E) |
| `--zg-cell-transition_layout_card` | Browser's default value | Sets the transition of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/EP738THM) |
| `--zg-cell-word-break_layout_card` | break-all | Sets the word break of items in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/8M5I3J8P) |

## CSS Selector

`<zg-card>` can be styled by common CSS selectors, like so:

```css
zg-card {
  background: red;
}
```

## Slots

`<zg-card>` contains placeholders to allow adding markup inside the component.

```html
<zg-card>Slotted Content</zg-card>
```

Below is a list of all the associated ZGCard slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts).

| Name | Description |
| --- | --- |
| (default) | Card content. |