<zg-card>

Interactive Storybook Playground

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

Related Web Components

• <zing-grid>
• <zg-body>
• <zg-cell>
• <zg-column>

Usage

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

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

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

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

CSS Variables

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

: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 or our Styling Basics guide to learn more about styling the grid.

CSS Selector

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

zg-card {
  background: red;
}

Slots

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

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

Below is a list of all the associated ZGCard slots. Check out the full list of slots.