Como importar um elemento

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

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

Sendo então o nome da pasta/nome do arquivo, com a chamada do include. Caso o elemento não tenha pasta, basta chamá-lo apenas pelo nome, exemplo:

{% include 'elemento-x' %}

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

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

Lembrando da possibilidade do envio de parâmetros a esse elemento, para uma possível customização 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>

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