--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/v1/api/tags/zg-source --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/v1/api/tags/zg-source.md mode: provenance representation: markdown origin_response_id: 6f75eb6b22e44a303ea3c2f141126f03 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.781Z version_nonce: 11f300c8c15ace873299f821b2982c01 generated_at_utc: 2026-10-24T01:31:39.203Z response_nonce: 531625a494dd3ece022f40a8a1263c56 ``` # `` Version 1 [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/zg-source--docs) The `` tag is a web component that is used to cite the source of the data in ZingGrid. The element internally wraps any text in a `` tag for proper semantics. The `` can be styled using CSS variables and the `zg-source` selector. ![Image of the DOM relationship for the zg-source web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-source-web-component-dom.png "Image of the DOM relationship for the zg-source web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZGFooter](https://www.zinggrid.com/docs/api/tags/zg-footer) | Parent | Generated, Manual | n/a | | [ZGHeader](https://www.zinggrid.com/docs/api/tags/zg-header) | Parent | Generated | n/a | | [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Manual | n/a | | [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Manual | n/a | | [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Manual | n/a | | [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Manual | n/a | | [ZGInput](https://www.zinggrid.com/docs/api/tags/zg-input) | Child | Manual | n/a | | [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Child | Manual | n/a | | [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Manual | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zing-grid/) - [``](https://www.zinggrid.com/docs/api/tags/zg-footer/) ## Usage A `` tag can be manually inserted inside the grid as slotted content or automatically inserted when the `source` attribute is added to the `` tag. You can use the `source` attribute, like so: ```html ``` You can slot the `` tag as well: ```html Source:https://www.zinggrid.com ``` ## Attributes The `` tag has some attributes for positioning the element within the grid layout. **Example Usage** ```html Source:https://www.zinggrid.com ``` ### position Indicates where to position the source - Type: String - Default: `"bottom"` - Accepted values: "top", "bottom", "both" - Supported versions: 2.x [Example code](https://app.zingsoft.com/demos/embed/7EDEO4QO) ## CSS Variables `` can be styled by CSS variables, like so: ```css :root { --zg-source-min-height: 120px; } ``` Below is a list of all the associated `--zg-source` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-source-background` | var(--theme-color-light) | Styles the background of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/B8CEE4RW) | | `--zg-source-background_bottom` | var(--zg-source-background, var(--theme-color-light)) | Styles the background of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/U2ULZN3K) | | `--zg-source-background_top` | var(--zg-source-background, var(--theme-color-light)) | Styles the background of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/HMPYHCA5) | | `--zg-source-border` | 1px solid var(--theme-border-color) | Styles the border of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/61L4J1BK) | | `--zg-source-border_bottom` | var(--zg-source-border, 0) | Styles the border of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/NLGMWVFV) | | `--zg-source-border_top` | 1px solid var(--theme-border-color) | Styles the border of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/XDGD9PE9) | | `--zg-source-border-bottom` | var(--zg-source-border, 0) | Styles the bottom border of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/7PHK3BWY) | | `--zg-source-border-bottom_bottom` | var(--zg-source-border-bottom, var(--zg-source-border, 0)) | Styles the bottom border of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/HU2H5A7R) | | `--zg-source-border-bottom_top` | var(--zg-source-border-bottom, var(--zg-source-border, 1px solid var(--theme-border-color))) | Styles the bottom border of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/ZLU0PJ8K) | | `--zg-source-border-left` | var(--zg-source-border, 0) | Styles the left border of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/V4JCUJ5Z) | | `--zg-source-border-left_bottom` | var(--zg-source-border-left, var(--zg-source-border, 0)) | Styles the left border of source when in grid footer | [Example code](https://app.zingsoft.com/demos/embed/TMDEY84Q) | | `--zg-source-border-left_top` | var(--zg-source-border-left, var(--zg-source-border, 0)) | Styles the left border of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/ZOSVTPPP) | | `--zg-source-border-radius` | 0 | Styles the border radius of source | [Example code](https://app.zingsoft.com/demos/embed/8A6G8QCU) | | `--zg-source-border-radius_bottom` | var(--zg-source-border-radius, 0 0 var(--zing-grid-border-radius, 0) var(--zing-grid-border-radius, 0)) | Styles the top border of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/FX3KMZFC) | | `--zg-source-border-radius_top` | var(--zg-source-border-radius, 0) | Sets the border radius of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/YANV98VN) | | `--zg-source-border-right` | var(--zg-source-border, 0) | Styles the right border of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/F2Q3GGWE) | | `--zg-source-border-right_bottom` | var(--zg-source-border-right, var(--zg-source-border, 0)) | Styles the right border of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/DVIKUSPV) | | `--zg-source-border-right_top` | var(--zg-source-border-right, var(--zg-source-border, 0)) | Styles the right border of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/XYYNP87U) | | `--zg-source-border-top` | var(--zg-source-border, 1px solid var(--theme-border-color) | Styles the top border of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/IYUVRHY0) | | `--zg-source-border-top_bottom` | var(--zg-source-border-top, var(--zg-source-border, 1px solid var(--theme-border-color))) | Sets the border radius of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/HHTAVNAN) | | `--zg-source-border-top_top` | var(--zg-source-border-top, var(--zg-source-border, 0)) | Styles the top border of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/QFZ02F7M) | | `--zg-source-color` | var(--theme-font-size) | Sets the font color content inside of source | [Example code](https://app.zingsoft.com/demos/embed/2V50QBIJ) | | `--zg-source-color_bottom` | var(--zg-source-color, var(--zg-source-border, 0)) | Sets the font color of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/ZYE5IX57) | | `--zg-source-color_top` | var(--zg-source-color, var(--zg-source-border, 0)) | Sets the font color of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/HXKVXNN1) | | `--zg-source-font-size` | inherit | Sets the font size of source | [Example code](https://app.zingsoft.com/demos/embed/26M7XA7S) | | `--zg-source-font-size_bottom` | var(--zg-source-font-size, .8rem) | Sets the font size of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/8OUWG6MW) | | `--zg-source-font-size_top` | var(--zg-source-font-size, .8rem) | Sets the font size of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/9L6UUOD1) | | `--zg-source-font-style` | inherit | Sets the font style of source | [Example code](https://app.zingsoft.com/demos/embed/DHFAV0VU) | | `--zg-source-font-style_bottom` | var(--zg-source-font-style, inherit) | Sets the font style of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/MO9TACWW) | | `--zg-source-font-style_top` | var(--zg-source-font-style, inherit) | Sets the font style of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/840GA0V0) | | `--zg-source-font-weight` | inherit | Sets the font weight of source | [Example code](https://app.zingsoft.com/demos/embed/MN67ITKE) | | `--zg-source-font-weight_bottom` | var(--zg-source-font-weight, inherit) | Sets the font weight of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/ZI6A0WHC) | | `--zg-source-font-weight_top` | var(--zg-source-font-weight, inherit) | Sets the font weight of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/USHIZ6F6) | | `--zg-source-line-height` | inherit | Setes the line height of source | [Example code](https://app.zingsoft.com/demos/embed/XGIEZHE5) | | `--zg-source-line-height_bottom` | var(--zg-source-line-height, inherit) | Sets the line height of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/2AFGKKGF) | | `--zg-source-line-height_top` | var(--zg-source-line-height, inherit) | Sets the line height of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/5YF3GLIN) | | `--zg-source-min-height` | auto | Sets the min-height of source | [Example code](https://app.zingsoft.com/demos/embed/65FQVPFH) | | `--zg-source-min-height_bottom` | var(--zg-source-min-height, var(--zg-source-border, 0)) | Sets the min-height of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/XFJ87KHV) | | `--zg-source-min-height_top` | var(--zg-source-min-height, var(--zg-source-border, 0)) | Sets the min-height of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/0QZLOW3U) | | `--zg-source-padding` | 5px var(--theme-padding_x) | Sets the padding of source | [Example code](https://app.zingsoft.com/demos/embed/3Q444PE7) | | `--zg-source-padding_bottom` | var(--zg-source-padding, 5px var(--theme-padding_x)) | Sets the padding of source when in grid footer | [Example code](https://app.zingsoft.com/demos/embed/32PB37Q8) | | `--zg-source-padding_top` | var(--zg-source-padding, 5px var(--theme-padding_x)) | Sets the padding of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/RVNCXN9N) | | `--zg-source-text-align` | left | Sets text alignment of content inside of source | [Example code](https://app.zingsoft.com/demos/embed/39DT0WPU) | | `--zg-source-text-align_bottom` | var(--zg-source-text-align, var(--zg-source-border, 0)) | Sets the text alignment of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/F3WEBJI1) | | `--zg-source-text-align_top` | var(--zg-source-text-align, var(--zg-source-border, 0)) | Sets the text alignment of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/340QGB1B) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-source { background-color: red; } ``` ## CSS Shadow Parts `` exposed elements within the shadow can be styled by CSS shadow parts, like so: ```css zg-source::part(source) { background-color: red; } ``` Below is a list of all the associated ZGSource shadow parts. Check out the [full list of CSS shadow parts](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Description | | --- | --- | | `source` | The container for the source | ## Slots `` contains placeholders to allow adding markup inside the component. ```html Slotted Content ``` Below is a list of all the associated ZGSource slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts). | Name | Description | | --- | --- | | (default) | Source content. |