experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-footer
mode: provenance
representation: html
origin_response_id: 9dd5217ca84ec2bae43c54caf93f77a6
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.633Z
version_nonce: 49447944f5a30771798a8e3c3ffcb083
generated_at_utc: 2026-10-24T11:27:38.615Z
response_nonce: 5f710e8c717086670ac00f569a401f15
Docs Version 1

<zg-footer>

Interactive Storybook Playground

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

ZGFooter Relationships
Component Relationship Type Ancestor
ZingGrid Parent Generated, Manual n/a
ZGButton Child Manual n/a
ZGCaption Child Generated, Manual n/a
ZGCheckbox Child Manual n/a
ZGIcon Child Manual n/a
ZGInput Child Manual n/a
ZGSelect Child Manual n/a
ZGSource Child Generated, Manual n/a
ZGText Child Manual n/a

Related Web Components

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.

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

Attributes

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

Top

CSS Variables

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

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

ZGFooter CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-footer-background 0 Styles the background of footer
--zg-footer-border-bottom var(--zg-footer-border, 0) Styles the bottom border of footer
--zg-footer-border-left var(--zg-footer-border, 0) Styles the left border of footer
--zg-footer-border-right var(--zg-footer-border, 0) Styles the right border of footer
--zg-footer-border-top var(--zg-footer-border, 0) Styles the top border of footer
Top

CSS Selector

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

zg-footer {
  padding: 2rem;
}
Top

Slots

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

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

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

ZGFooter Slots
Name Description Demo
Footer content.
Top

[api: <zg-footer>]