# component

> Build reusable pieces of markup with props and slots.

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.

page.kiln:

```kiln
{% 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 %}
```

components/card.kiln:

```kiln
{% 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>
```

Output:

```html
<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.

```kiln
<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](https://kilnlang.com/docs/tags/props/#other-variables).

## Without content

A component with no content can be rendered with [`include`](https://kilnlang.com/docs/tags/include/). Every slot then shows its fallback.