<div class="c-related-articles{{#if stone}} c-related-articles--stone{{/if}}{{#if thumbnail}} c-related-articles--thumbnail{{/if}}">
  <h2 class="c-related-articles__heading">{{this.heading}}</h2>

  <div class="c-related-articles__cards">
    {{#each articles}}
      <div class="c-card">
        <a href="#" class="c-card__grid c-card__link">
          {{#if this.labelAuthor}}
            <div class="c-label--card c-label--card--author">
              <span class="c-label--card__content">{{this.labelAuthor}}</span>
            </div>
          {{/if}}
          <div class="c-card__content">
            {{#if this.label}}
              <div class="c-label--card">
                <span class="c-label--card__content {{#if label.color }} c-label--card__content--{{label.color}}{{/if}}">{{this.label.text}}</span>
              </div>
            {{/if}}
            {{#if this.labelSpecial}}
              <div class="c-label--card c-label--card--special">
                <span class="c-label--card__content">{{this.labelSpecial}}</span>
              </div>
            {{/if}}
            <div class="c-card__hed">
              <div class="c-card__hed-text">{{this.text}}</div>
            </div>
            {{#if this.number}}
              <span class="c-card__content-number">{{this.number}}</span>
            {{/if}}
            {{#if this.indicatorIcon}}
              {{> indicator-icon icon=this.indicatorIcon }}
            {{/if}}
            {{#if this.price}}
              <div class="c-card__content-price">
                <span class="c-card__content-price-asking">Asking: {{this.price.askingPrice}}</span>
                <span class="c-card__content-price-selling">Selling: {{this.price.sellingPrice}}</span>
              </div>
            {{/if}}
            {{#if this.timestamp}}
              <div class="c-card__meta">
                {{> timestamp timestamp=this.timestamp }}
              </div>
            {{/if}}
          </div>

          {{#if this.photo}}
            <div class="c-card__media">
              <div class="c-image-container">
                <img class="c-image" src="http://placekitten.com/240/160" alt="Photo">
              </div>
            </div>
          {{/if}}
        </a>
        {{#if includeBookmarkButton}}
          <span class="c-related-articles__bookmark-container">
            <button class="c-button c-related-articles__bookmark{{#ifCond this.isBookmarked "==" true}} c-related-articles__bookmark--active{{/ifCond}} c-button--icon-only c-button--no-border c-button--no-border-radius c-button--transparent-default js-article-list-bookmark" aria-label="Bookmark" type="button" {{#if hideBookmark}} aria-hidden="true" disabled{{/if}}>
              <svg class="c-button__icon {{#if hideBookmark}} u-hidden{{/if}}" role="img" pointer-events="none" focusable="false" aria-hidden="true">
                <use xlink:href="{{generatedSvgSpritePath}}#bookmark"></use>
              </svg>
            </button>
          </span>
        {{/if}}
      </div>
    {{/each}}
  </div>
</div>

