zg-footer

The <zg-footer> is a web component that is a simple container component for content placed at the bottom of a grid.
It may contain <zg-caption> or <zg-source>, but also may 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

Related Web Components

Usage

A <zg-footer> tag can be manually inserted inside the grid as slotted content. The footer is stylable 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>

Attributes

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

CSS Variables

All the associated --zg-footer CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
--zg-footer-background: red;
}
ZGFooter CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-footer-background0Styles the background of footer
--zg-footer-border-bottomvar(--zg-footer-border, 0)Styles the bottom border of footer
--zg-footer-border-leftvar(--zg-footer-border, 0)Styles the left border of footer
--zg-footer-border-rightvar(--zg-footer-border, 0)Styles the right border of footer
--zg-footer-border-topvar(--zg-footer-border, 0)Styles the top border of footer

CSS Selector

<zg-footer> can be styled by common CSS selectors.

zg-footer {
  padding: 2rem;
}