Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Taking your approach on designing things actually makes it fun, more natural, and overall easier.

— Dominik, Developer

Partial Tag

Partials are reusable views that may find themselves in any number of other layouts, templates, and other partials.


You can use any view as a partial by using this here partial tag.

// This will import /resources/views/blog/_card.antlers.html
{{ partial:blog/card }}
Best Practice

We recommend prefixing any views intended to be only used as partials with an underscore, _like-this.antlers.html and reference them `{{ partial:like-this }}. The underscore is not necessary in the partial tag definition.

Passing Data

You can pass additional data into a partial via on-the-fly parameters. The parameter name will become a variable inside the partial. The only reserved parameter is src, so you can name your variables just about anything.

{{ partial:list header="favorite ice cream flavors" :items="flavors" }}
// Inside `list.antlers.html`
<h2>These are my {{ header }}</h2>
{{ items | ul }}
<h2>These are my favorite ice cream flavors</h2>
<li>Chocolate Chip Cookie Dough</li>
<li>Mint Chocolate Chip</li>
<li>Neon Mind Melter</li>

Note that the :items parameter is prefixed by a colon, meaning it will pass the value of a flavors variable, if it exists.


Sometimes you might need to pass a large chunk of content into a partial. Jamming a bunch of HTML through a parameter would be like trying to shove a pizza through a donut. A hilarious YouTube video but a bad idea on a Friday night.

The solution is to use the partial tag as a pair. Everything inside will be passed into the partial in the {{ slot }} variable.

// Your main view
{{ partial:modal title="Confirmation" }}
<div class="flex items-center">
<img src="/img/warning.svg" />
<p>Are you sure you want to delete your entire collection of WWE wrestling figures?</p>
{{ /partial:modal }}
// _modal.antlers.html
<div class="bg-white rounded shadow">
<h2 class="p-2 border-b">{{ title }}</h2>
{{ slot }}
<button @click="confirm" class="button">Do it</button>
<div class="bg-white rounded shadow">
<h2 class="p-2 border-b">Confirmation</h2>
<div class="flex items-center">
<img src="/img/warning.svg" />
<p>Are you sure you want to delete your entire collection of WWE wrestling figures?</p>
<button @click="confirm" class="button">Do it</button>

Conditional Rendering

You can render a partial only if a condition is met.

{{ partial:components/subtitle :when="subtitle" }}
{{ subtitle }}
{{ /partial:components/subtitle }}

Also supports the converse using :unless.

If you haven't read up on views yet, you should. It's considered fundamental knowledge, like knowing that seals are just dog mermaids. 🐕 🧜‍♀️

You may also be interested in the partial:exists or partial:if_exists tags.




You can pass the name of the partial with a parameter instead of tag argument. Example: src="cards/author_bio" or :src="var_name".



Render a partial only if a condition is met.



The converse of when.



Any parameter you create will be passed through to the partial as a variable.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →