Newsletter component for Kiwi.com Orbig design system by SUPERKODERS

1-component-list.twig

<table class="t-list {{ class }}" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    {% for item in items %}
      <tr>
        <th class="t-list__item">
          {% embed "../components/t-icon.twig" with {'iconUrl': item.icon} %}
            {% block content %}
              {{ item.content }}
            {% endblock	%}
          {% endembed %}
        </th>
      </tr>
    {% endfor %}
  </tbody>
</table> <!-- / t-list -->

2-parent.twig

{% include "../components/t-list.twig" with {
  items: [
    {
      'icon': 'walk.png',
      'content': 'Fast Track route through security'
    },
    {
      'icon': 'lounge.png',
      'content': '€10 VIP lounge discount voucher'
    }
  ]
} %}

3-parent-compiled.html

<table class="t-list " border="0" cellspacing="0" cellpadding="0" style="border-spacing: 0; color: #252a31; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; margin: 0; padding: 0; table-layout: fixed; text-align: left; width: 100%;">
  <tbody>
    <tr>
      <th class="t-list__item" style="font-weight: normal; padding: 1px 0; text-align: left; vertical-align: middle;">
        <table class="t-icon " border="0" cellspacing="0" cellpadding="0" style="border-spacing: 0; color: #252a31; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; margin: 0; max-width: 100%; padding: 0; table-layout: auto; text-align: left; width: auto;">
          <tbody>
            <tr>
              <th class="t-icon__icon t-icon__icon--pr" style="font-size: 0; font-weight: normal; padding: 0 12px 0 0; text-align: center; vertical-align: top; width: 1px;">
                <img src="http://newsletter-kiwi2019.superkoderi.cz/img/icons/paletteInkNormal/32/walk.png" alt width="16" height="16" style="border: 0; vertical-align: middle;">
              </th>
              <th class="t-icon__label" style="font-weight: normal; text-align: left; vertical-align: top;"> Fast Track route through security </th>
            </tr>
          </tbody>
        </table> <!-- / t-icon -->
      </th>
    </tr>
    <tr>
      <th class="t-list__item" style="font-weight: normal; padding: 1px 0; text-align: left; vertical-align: middle;">
        <table class="t-icon " border="0" cellspacing="0" cellpadding="0" style="border-spacing: 0; color: #252a31; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; margin: 0; max-width: 100%; padding: 0; table-layout: auto; text-align: left; width: auto;">
          <tbody>
            <tr>
              <th class="t-icon__icon t-icon__icon--pr" style="font-size: 0; font-weight: normal; padding: 0 12px 0 0; text-align: center; vertical-align: top; width: 1px;">
                <img src="http://newsletter-kiwi2019.superkoderi.cz/img/icons/paletteInkNormal/32/passport.png" alt width="16" height="16" style="border: 0; vertical-align: middle;">
              </th>
              <th class="t-icon__label" style="font-weight: normal; text-align: left; vertical-align: top;"> Fast Track passport control route (Terminal 2 only) </th>
            </tr>
          </tbody>
        </table> <!-- / t-icon -->
      </th>
    </tr>
    <tr>
      <th class="t-list__item" style="font-weight: normal; padding: 1px 0; text-align: left; vertical-align: middle;">
        <table class="t-icon " border="0" cellspacing="0" cellpadding="0" style="border-spacing: 0; color: #252a31; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; margin: 0; max-width: 100%; padding: 0; table-layout: auto; text-align: left; width: auto;">
          <tbody>
            <tr>
              <th class="t-icon__icon t-icon__icon--pr" style="font-size: 0; font-weight: normal; padding: 0 12px 0 0; text-align: center; vertical-align: top; width: 1px;">
                <img src="http://newsletter-kiwi2019.superkoderi.cz/img/icons/paletteInkNormal/32/lounge.png" alt width="16" height="16" style="border: 0; vertical-align: middle;">
              </th>
              <th class="t-icon__label" style="font-weight: normal; text-align: left; vertical-align: top;"> €10 VIP lounge discount voucher </th>
            </tr>
          </tbody>
        </table> <!-- / t-icon -->
      </th>
    </tr>
  </tbody>
  </table> <!-- / t-list -->