What's on this page

• Create a component
• Use the component
• Pass variables
• Change the components directory

Use Twig components

Components are small reusable Twig templates (button, card, alert, etc.) called with a dedicated tag: they accept attributes and can wrap any content.

Create a component

Components are Twig templates stored in the components/ subdirectory of your layouts directory. Create layouts/components/button.twig:

<button {{ attributes.merge({class: 'rounded px-4'}) }}>
  {{ slot }}
</button>

• slot contains the content added between the opening and the closing tags
• attributes contains the attributes passed to the component, and merge() combines them with default values

Use the component

Call the component with the x tag followed by : and the file name of the component, without extension:

{% x:button with {class: 'text-white'} %}
  <strong>Click me</strong>
{% endx %}

It will render:

<button class="text-white rounded px-4">
  <strong>Click me</strong>
</button>

Pass variables

Values passed with with are also available as variables inside the component. For example, layouts/components/card.twig:

<article class="card">
  <h2><a href="{{ href }}">{{ title }}</a></h2>
  {{ slot }}
</article>

Use it in a list template:

{% for p in page.pages.showable %}
  {% x:card with {href: url(p), title: p.title} %}
    <p>{{ p.description }}</p>
  {% endx %}
{% endfor %}

Change the components directory

The directory and file extension of components can be changed in cecil.yml:

layouts:
  components:
    dir: components # components source directory
    ext: twig       # components files extension