<div class="c-article-list">
  <h2 class="c-article-list__heading">{{ heading }}</h2>
  <ul class="c-article-list__content c-article-list__content--thumbnail">
    {{#each items}}
    <li class="c-article-list__item">
      <div class="c-article-list__item-content">
        <a class="c-article-list__link" href="#">
          <span class="c-article-list__icon-text-wrapper">
            {{#if this.label}}
            <span class="o-card__label o-card__label--muted">
              <span class="o-card__label-text"> {{ this.label }} </span>
            </span>
            {{/if}}
            <span class="c-article-list__link-text">{{ this.headline }}</span>
          </span>
          <div class="c-article-list__img-wrapper">
            <img class="c-article-list__img" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Photo&w=220&h=124" alt="Photo">
          </div>
        </a>
      </div>
    </li>
    {{/each}}
    <li class="c-article-list__item">
      <div class="c-article-list__item-content">
        <a class="c-article-list__link" href="#">
          <span class="c-article-list__icon-text-wrapper">
            <span class="o-card__label o-card__label--muted">
              <span class="o-card__label-text"> Updated </span>
            </span>
            <span class="c-article-list__link-text">I am a lonely example that has no photo</span>
          </span>
        </a>
      </div>
    </li>
    <li class="c-article-list__item c-article-list__item--sponsored u-always-bleed">
      <div class="c-article-list__item-content">
        <a class="c-article-list__link" href="#">
          <span class="c-article-list__icon-text-wrapper">
            <span class="c-article-list__link-label">Sponsor Content</span>
            <span class="c-article-list__link-text">This is an example of Sponsor content</span>
          </span>
          <div class="c-article-list__img-wrapper">
            <img class="c-article-list__img" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Photo&w=220&h=124" alt="Photo">
          </div>
        </a>
      </div>
    </li>
    <li class="c-article-list__item">
      <div class="c-article-list__item-content">
        <a class="c-article-list__link" href="#">
          <span class="c-article-list__icon-text-wrapper">
            <span class="o-card__label o-card__label--muted">
              <span class="o-card__label-text"> Unlimited </span>
            </span>
            <span class="c-article-list__link-text">This is an example of Unlimited content
              <span class="c-indicator-icon" aria-label="Subscriber content">
                <span class="u-visually-hidden">Subscriber content:</span>
                <svg class="c-indicator-icon__art" role="img" pointer-events="none" focusable="false" aria-hidden="true">
                  <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-key"></use>
                </svg>
              </span>
            </span>
          </span>
          <div class="c-article-list__img-wrapper">
            <img class="c-article-list__img" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Photo&w=220&h=124" alt="Photo">
          </div>
        </a>
      </div>
    </li>
  </ul>
</div>
