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