Como importar um elemento

Após ter criado o elemento e estruturado o código HTML dentro dele, a importação em uma página é bem simples. Basta fazer a chamada do elemento no código da página em que você deseja importá-lo como no exemplo abaixo:

{% include 'meus-elementos/elemento-x' %}

Caso o elemento não tenha pasta, basta chamá-lo apenas pelo nome:

{% include 'elemento-x' %}

Apenas para reforçar: você poderá importar o elemento dentro de qualquer tag HTML, ele será reconhecido normalmente. Veja no código abaixo:

<main>
  <div>
    {% include 'meus-elementos/elemento-x' %}
  </div>
</main>

Lembre-se também que existe a possibilidade de enviar parâmetros aos elementos, para possíveis customizações do mesmo:

<main>
  <div>
    {% include 'meus-elementos/elemento-x' with { hello: 'World' } %}
  </div>
</main>

Para capturar o valor enviado via parâmetro, basta no corpo do elemento realizar a seguinte chamada:

<div>
  <strong>O valor "{{ hello }}" foi recebido via parâmetro</strong>
</div>

hello deverá ser o nome do parâmetro que você declarou na chamada do elemento.