<zg-header>

Interactive Storybook Playground

The <zg-header> is a web component that is the semantic container placed at the top of the grid to hold various grid items. <zg-header> is created internally and should not be placed directly in the user's HTML. You can style the <zg-header> through CSS variables or the zg-header CSS selector.

Image of the DOM relationship for the zg-header web component tag

Related Web Components

Usage

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

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

Attributes

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

Top

CSS Variables

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

:root {
--zg-header-background: red;
}

Below is a list of all the associated --zg-header CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

ZGHeader CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-header-background Browser's default value Styles the background of header
--zg-header-border 0 Styles the border of header
--zg-header-border-bottom var(--zg-header-border, 0) Styles the bottom border of header
--zg-header-border-left var(--zg-header-border, 0) Styles the left border of header
--zg-header-border-radius 0 Applies border radius to header
--zg-header-border-right var(--zg-header-border, 0) Styles the right border of header
--zg-header-border-top var(--zg-header-border, 0) Styles the top border of header
Top

CSS Selector

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

zg-header {
  background: red;
}
Top

Slots

There are no slots available for the <zg-header> web component.

Top

[api: <zg-header>]