{content.items.map((item, i) => (
)
}
```
#### Frontmatter overrides
Content authors override component vars in section frontmatter:
```yaml
---
type: PricingTable
vars:
card-gap: 2rem
---
```
Only vars declared in `meta.js` are emitted — unknown var names in frontmatter are ignored.
#### Foundation vars vs component vars
| | Foundation vars | Component vars |
| --- | --- | --- |
| Declared in | `main.js` | `meta.js` |
| CSS scope | `:root` (global) | `#section-{id}` (scoped) |
| Overridden by | `theme.yml` (`vars:`) | Section frontmatter (`vars:`) |
| Context-aware types | Yes (`color`, `gradient`) | No (always context-independent) |
---
### Sticky
Whether a section of this type stays in view as the page scrolls, unless its author says otherwise:
```javascript
// sections/Header/meta.js
export default {
title: 'Header',
sticky: true,
}
```
An author turns it off with `sticky: false` in the section's frontmatter (or on with `sticky: true`, for a type that declares nothing) — it is one of the section's own settings, so your component never receives it as a param.
The runtime makes sticky the box that can stay in view:
- **a section in the header** (or another layout area) — the area's box, stacked above the areas that scroll under it;
- **a section in the body** — its own wrapper, which stays in view below whatever is stuck at the top: a sub-navigation sits under a sticky header with nothing to declare;
- **a child section** that its parent renders as a section (kit's `
{/* ... */}
))}