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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-footer.md
mode: provenance
representation: markdown
origin_response_id: c6a18e4a17112a3aff377e17410bf248
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.633Z
version_nonce: eac8d5318b64f686943af6c3aaadb4f9
generated_at_utc: 2026-10-24T12:18:39.967Z
response_nonce: 2cbff4e53c33f16b041a0ea401abbafe
```

# `<zg-footer>`

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

The `<zg-footer>` tag is a web component that is a simple container component for content placed at the bottom of a grid.  It can contain `<zg-caption>` or `<zg-source>`, but can also contain arbitrarily defined elements inserted by the developer. You can style the `<zg-footer>` through CSS variables or the `zg-footer` CSS selector.

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

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated, Manual | n/a |
| [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Manual | n/a |
| [ZGCaption](https://www.zinggrid.com/docs/api/tags/zg-caption) | Child | Generated, 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 |
| [ZGSource](https://www.zinggrid.com/docs/api/tags/zg-source) | Child | Generated, Manual | n/a |
| [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Manual | n/a |

#### Related Web Components

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

## Usage

A `<zg-footer>` tag can be manually inserted inside the grid as slotted content. The footer is styleable via CSS variables or the `zg-footer` CSS selector.

```html
<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-footer>Hello World</zg-footer>
</zing-grid>
```

## Attributes

There are no attributes available for the `<zg-footer>` web component.

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

```css
:root {
--zg-footer-background: red;
}
```

Below is a list of all the associated `--zg-footer` 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-footer-background` | 0 | Styles the background of footer | [Example code](https://app.zingsoft.com/demos/embed/0EVTA5YN) |
| `--zg-footer-border-bottom` | var(--zg-footer-border, 0) | Styles the bottom border of footer | [Example code](https://app.zingsoft.com/demos/embed/PUY88M0U) |
| `--zg-footer-border-left` | var(--zg-footer-border, 0) | Styles the left border of footer | [Example code](https://app.zingsoft.com/demos/embed/V3H9QB6G) |
| `--zg-footer-border-right` | var(--zg-footer-border, 0) | Styles the right border of footer | [Example code](https://app.zingsoft.com/demos/embed/TAJ68HA9) |
| `--zg-footer-border-top` | var(--zg-footer-border, 0) | Styles the top border of footer | [Example code](https://app.zingsoft.com/demos/embed/FMUNXOES) |

## CSS Selector

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

```css
zg-footer {
  padding: 2rem;
}
```

## Slots

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

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

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

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