> For the complete documentation index, see [llms.txt](https://mariohernandez.gitbook.io/components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mariohernandez.gitbook.io/components/getting-started/twig-blocks.md).

# Twig Blocks

## What are Twig Blocks?

Twig blocks are used for inheritance and act as placeholders and replacements at the same time. Twig blocks can be thought of as holes to fill in in a Drupal page. Or perhaps as regions in your pages.

The challenge we face is having control of the markup while adhering to Drupal's best practices for rendering content. When the time to integrate a component with Drupal comes, oftentimes using `include` statements will do the job, but there are times when we want to modify content or markup before Drupal renders a component and `include` statements don't allow for this. We could use the `extends` Twig statements but these could also be limiting. In these situations the best option is to use Twig's `embed` statements. Embed statements combine the functionality of both, `include` and `extends` statements. Let's see an example.

{% tabs %}
{% tab title="card.twig" %}

```php
<article class="card
  {{- attributes ? ' ' ~ attributes.class -}}"
  {{- attributes ? attributes|without(class) -}}>
  {{ title_prefix }}
  {{ title_suffix }}
  ...
  

<div data-gb-custom-block data-tag="block">

  

</div>

</article>
```

{% endtab %}
{% endtabs %}

We've declared a twig block (`card_extra_content`), in which we can add or remove any content we want. The block on its own does nothing. Currently we added the Twig block as a placeholder to use later.

{% hint style="warning" %}
**IMPORTANT:** Twig blocks are not the same, or have anything to do with Drupal blocks.
{% endhint %}

```php
{% embed '@training_theme/card/card.twig' with {
    heading: heading,
    image: content.field_image|render|trim is not empty ? content.field_image,
  }
%}
  

<div data-gb-custom-block data-tag="block">

    <h3>Hey this is new content</h3>
    <p>How cool is it that we can add or
    remove any content from here with twig blocks?</p>
  

</div>

</div>

```

The code above shows how we can use the Card component and we can make use of the Twig Block. This gives us a lot of flexibility and control to alter content before rendering. We will see other examples of Twig Blocks throughout this training.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://mariohernandez.gitbook.io/components/getting-started/twig-blocks.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.