# Content Stacks
URL: /kida/docs/advanced/content-stacks/
Section: advanced
Description: Collect and render content from nested templates with push and stack tags
---
> For a complete page index, fetch /kida/llms.txt.
Content stacks solve a common problem in template hierarchies: child templates and partials need to contribute CSS, JavaScript, or other content to a location they do not control (typically the `` or end of `` in a base layout).
With `{% push %}` and `{% stack %}`, any template can append content to a named collection, and the base template decides where that collected content is rendered.
## Basic Usage
Use `{% push "name" %}` to add content to a named stack, and `{% stack "name" %}` to render everything that was pushed:
```kida
{# base.html #}
{% stack "styles" %}
{% block content %}{% end %}
{% stack "scripts" %}
```
```kida
{# page.html #}
{% extends "base.html" %}
{% block content %}
{{ widget.render() }}
{% push "styles" %}
{% end %}
{% push "scripts" %}
{% end %}
{% end %}
```
The rendered output places widget assets exactly where the base template defined the stack output points.
## Named Stacks
Stack names are string literals. You can define as many independent stacks as you need:
```kida
{% stack "styles" %}
{% stack "scripts" %}
{% stack "meta" %}
{% stack "modals" %}
```
Each `{% push %}` targets a specific stack by name. Pushes to different stacks are independent:
```kida
{% push "meta" %}
{% end %}
{% push "styles" %}
{% end %}
```
Content is rendered in the order it was pushed. If multiple templates push to the same stack, the output follows rendering order.
## Use with Inheritance
Stacks work across template inheritance chains. Child blocks can push content that appears in the base template's stack output:
```kida
{# base.html #}
{% stack "head" %}
{% block body %}{% end %}
{% stack "scripts" %}
```
```kida
{# layout.html #}
{% extends "base.html" %}
{% block body %}
{% block content %}{% end %}
{% push "head" %}
{% end %}
{% end %}
```
```kida
{# article.html #}
{% extends "layout.html" %}
{% block content %}
{{ article.body }}
{% push "head" %}
{% end %}
{% push "scripts" %}
{% end %}
{% end %}
```
The final output includes both `/css/layout.css` and `/css/article.css` in the ``, and `/js/reading-time.js` before ``.
Stacks also work inside included templates:
```kida
{# partials/gallery.html #}
{% for image in images %}
{% end %}
{% push "styles" %}
{% end %}
{% push "scripts" %}
{% end %}
```
```kida
{# page.html #}
{% extends "base.html" %}
{% block content %}
{% include "partials/gallery.html" %}
{% end %}
```
The gallery partial's CSS and JS are collected and rendered at the stack output points in `base.html`.
## Common Patterns
### CSS Collection
Aggregate page-specific stylesheets without duplicating `` tags in every child template:
```kida
{# base.html #}
{% stack "styles" %}
```
```kida
{# dashboard.html #}
{% extends "base.html" %}
{% block content %}
{% push "styles" %}
{% end %}
{% include "partials/chart.html" %}
{% end %}
```
### JS Modules
Load JavaScript at the end of the body, contributed by any template in the hierarchy:
```kida
{# base.html #}
{% block content %}{% end %}
{% stack "scripts" %}
{% stack "inline_js" %}
```
```kida
{# form.html #}
{% extends "base.html" %}
{% block content %}
{% push "scripts" %}
{% end %}
{% push "inline_js" %}
{% end %}
{% end %}
```
### Meta Tags
Build up `` tags from child templates:
```kida
{# base.html #}
{% stack "meta" %}
{{ page.title }} - My Site
```
```kida
{# blog-post.html #}
{% extends "base.html" %}
{% block content %}
{% push "meta" %}
{% end %}
{{ post.body }}
{% end %}
```
## See Also
- [[docs/syntax/inheritance|Inheritance]] -- Template inheritance with extends and blocks
- [[docs/syntax/includes|Includes]] -- Include partial templates
- [[docs/advanced/compiler|Compiler]] -- How push/stack compiles to Python