<zg-footer>

Version 1

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.

Related Web Components

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

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

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

CSS Selector

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

zg-footer {
  padding: 2rem;
}

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.