component

A component is a template that takes props and content from its caller. Use it for cards, buttons, dialogs and other reusable pieces with markup inside.

{% component "components/card" with { title: post.title, href: post.url } %}
	<p>{{ post.excerpt }}</p>
	{% fill "footer" %}
		<a href="{{ post.url }}">Read more</a>
	{% endfill %}
{% endcomponent %}

{% props title, href %}
<article class="card">
	<h2><a href="{{ href }}">{{ title }}</a></h2>
	{% slot %}{% endslot %}
	{% if slots.footer %}
		<footer>
			{% slot "footer" %}{% endslot %}
		</footer>
	{% endif %}
</article>

<article class="card">
	<h2><a href="/blog/hello/">Hello, world</a></h2>
	<p>Our first post.</p>
	<footer>
		<a href="/blog/hello/">Read more</a>
	</footer>
</article>

Slots

• {% slot %} outputs the caller's content. Content outside any fill goes into this default slot.
• {% fill "name" %} in the caller provides content for a named slot, and {% slot "name" %} in the component outputs it.
• Content inside slot is a fallback, shown when the caller didn't fill that slot. Variables first set in a fallback stay inside it.
• slots is a hash that says which slots were filled, such as slots.footer. It includes slots declared by a layout the component extends.

<h2>{% slot "title" %}Untitled{% endslot %}</h2>

Scope

The component only sees the variables passed with with, plus globals and slots. Fill content renders in the caller's scope, so in the example above, post is the caller's variable.

Slots belong to the component that received them. A template the component includes can't output them.

To accept attributes such as class without declaring each one, end the component's props with a rest prop. See props.

Without content

A component with no content can be rendered with include. Every slot then shows its fallback.