<div class="c-article-list">
  <h2 class="c-article-list__heading">{{ heading }}</h2>
  <ol class="c-article-list__content c-article-list__content--ordered">
    {{#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="c-card__label c-card__label--muted">
               {{ this.label }}
            </span>
            {{/if}}
            <span class="c-article-list__link-text">{{ this.headline }}</span>
          </span>
        </a>
      </div>
    </li>
    {{/each}}
    <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>
        </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="c-card__label c-card__label--muted">
              Subscribed
            </span>
            <span class="c-article-list__link-text">This is an example of subscriber 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="{{generatedSvgSpritePath}}#icon-key"></use>
                </svg>
              </span>
            </span>
          </span>
        </a>
      </div>
    </li>
  </ol>
</div>
