WP Timber/Twig Example Usage - Card Grid Twig Include

card-grid.twig

{% if card_grid %}
  <section class="c-card-grid{{ card_grid.classes ? ' ' ~ card_grid.classes }}">
    <div data-bp="container">
      <div class="l-wrap">
        <div class="c-card-grid__container u-spacing">
        
          {% if card_grid.heading or card_grid.dek %}
            <div class="c-card-grid__header l-conatiner--m u-spacing--half">
              {% include "@atoms/text/heading/heading.twig" with {
                "heading": {
                  "level": "1",
                  "text": card_grid.title,
                  "classes": "c-card-grid__heading"
                }
              } %}
              {% include "@atoms/text/dek/dek.twig" with {
                "dek": {
                  "text": card_grid.dek,
                  "classes": "c-card-grid__dek"
                }
              } %}
            </div>
          {% endif %}
          {% if card_grid.posts %}
            <div class="c-card-grid__posts" data-bp="grid 6@sm 4@md 3@lg">
              
              {# 
                THIS IS THE PART TO FOCUS ON:
                - Card component include
                - Accepts the "posts" variable passed from the card-grid.twig include and assigns each post value to a card-specific variable
              #}
              {% for post in card_grid.posts %}
                {% include "@molecules/cards/card.twig" with {
                  "card": {
                    "thumbnail": {
                      "src": post.thumbnail.src|resize(500),
                    },
                    "title": post.title,
                    "link": post.link,
                    "heading": {
                      "level": "2",
                      "size": "lg",
                    },
                    "category": {
                      "name": post.category.name,
                      "link": post.category.link
                    }
                  }
                } %}
              {% endfor %}
              
            </div>
          {% else %}
            <p>Sorry, there are no posts at this time.</p>
          {% endif %}
        </div>
      </div>
    </div>
  </section>
{% endif %}