{{#ifCond display "==" "default"}}
<div class="o-card o-card--promo o-card--promo-img-t">
  <div class="o-card--promo__content">
    <div class="o-card--promo__col">
      <div class="o-card--promo__img">
        <div class="o-card--promo__img-scale">
          <img src="https://www.theglobeandmail.com/files/editorial/Newsletters/Thumbs/tgam-enews-th-business-am.jpg">
        </div>
      </div>
      {{#if hed}}<h3 class="o-card--promo__hed">{{hed}}</h3>{{/if}}
      {{#if subhed}}<p class="o-card--promo__subhed">{{subhed}}</p>{{/if}}
      {{#if dek}}
        {{!-- There's purposely no space between the text and the icon --}}
        <p class="o-card--promo__dek c-static-page__text">{{dek}}<span class="c-indicator-icon" aria-label="Subscriber content">
            <svg class="c-indicator-icon__art c-indicator-icon__art--key" role="img" pointer-events="none" focusable="false" aria-hidden="true">
              <use xlink:href="{{generatedSvgSpritePath}}#icon-key"></use>
            </svg>
          </span>
        </p>
      {{/if}}
      <div class="o-card--promo__cta">
        {{#if ctaButton1Text}}
          <button class="c-button c-button--white-secondary">
            <span class="c-button__text">{{ctaButton1Text}}</span>
          </button>
        {{/if}}
        {{#if ctaButton2Text}}
          <a href="#" class="c-button c-button--white-secondary">
            <span class="c-button__text">{{ctaButton2Text}}</span>
          </a>
        {{/if}}
      </div>
    </div>
  </div>
</div>
{{/ifCond}}

{{#ifCond display "==" "b-right"}}
<div class="o-card o-card--promo o-card--promob o-card--promo-img-r">
  <div class="o-card--promo__content">
    <div class="o-card--promo__col">
      {{#if hed}}<h3 class="o-card--promo__hed"><a href="#">{{hed}}</a></h3>{{/if}}
      {{#if dek}}
        {{!-- There's purposely no space between the text and the icon --}}
        <p class="o-card--promo__dek c-static-page__text">{{dek}}<span class="c-indicator-icon" aria-label="Subscriber content">
            <svg class="c-indicator-icon__art c-indicator-icon__art--key" role="img" pointer-events="none" focusable="false" aria-hidden="true">
              <use xlink:href="{{generatedSvgSpritePath}}#icon-key"></use>
            </svg>
          </span>
        </p>
      {{/if}}
      <div class="o-card--promo__cta">
        {{#if ctaButton1Text}}
          <a href="#" class="c-button c-button--white-secondary">
            <span class="c-button__text">{{ctaButton1Text}}</span>
          </a>
        {{/if}}
      </div>
    </div>
    <div class="o-card--promo__col">
      <div class="o-card--promo__img">
        <div class="o-card--promo__img-scale">
          <a href="#">
            <img src="http://www.placehold.it/160x160">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{{/ifCond}}

{{#ifCond display "==" "b-left"}}
<div class="o-card o-card--promo o-card--promob o-card--promo-img-l">
  <div class="o-card--promo__content">
    <div class="o-card--promo__col">
      <div class="o-card--promo__img">
        <div class="o-card--promo__img-scale">
          <a href="#">
            <img src="http://www.placehold.it/160x160">
          </a>
        </div>
      </div>
    </div>
    <div class="o-card--promo__col">
      {{#if hed}}<h3 class="o-card--promo__hed"><a href="#">{{hed}}</a></h3>{{/if}}
      {{#if dek}}<p class="o-card--promo__dek c-static-page__text">{{dek}}</p>{{/if}}
      <div class="o-card--promo__cta">
        {{#if ctaButton1Text}}
          <a href="#" class="c-button c-button--white-secondary">
            <span class="c-button__text">{{ctaButton1Text}}</span>
          </a>
        {{/if}}
      </div>
    </div>
  </div>
</div>
{{/ifCond}}

{{#ifCond display "==" "c"}}
<div class="o-card o-card--promo o-card--promoc o-card--promo-img-t">
  <a href="#" class="o-card--promo__link">
    <div class="o-card--promo__content">
      <div class="o-card--promo__col">
        <div class="o-card--promo__img">
          <div class="o-card--promo__img-scale">
            {{> image this.image}}
          </div>
        </div>
        {{#if hed}}
          <h3 class="o-card--promo__hed">
            {{!-- There's purposely no space between the text and the icon --}}
            <span class="o-card--promo__hed-text">{{hed}}</span>{{#if this.icon}}{{> indicator-icon icon=this.icon}}{{/if}}
          </h3>
        {{/if}}
      </div>
    </div>
  </a>
</div>
{{/ifCond}}

{{#ifCond display "==" "d"}}
<div class="o-card o-card--promo o-card--promod">
  <div class="o-card--promo__content">
    <div class="o-card--promo__col">
      {{#if hed}}
        <h3 class="o-card--promo__hed">
          <a href="#" class="o-card--promo__link">
            {{hed}}<span class="c-indicator-icon" aria-label="Subscriber content">
              <svg class="c-indicator-icon__art c-indicator-icon__art--key" role="img" pointer-events="none" focusable="false" aria-hidden="true">
                <use xlink:href="{{generatedSvgSpritePath}}#icon-key"></use>
              </svg>
            </span>
          </a>
        </h3>
      {{/if}}
      {{#if dek}}
        <p class="o-card--promo__dek c-static-page__text">{{dek}}</p>
      {{/if}}

      {{#if ctaButton1Text}}
        <div class="o-card--promo__col__buttons">
          <button class="c-button c-button--white-secondary">
            <span class="c-button__text">{{ctaButton1Text}}</span>
          </button>
        </div>
      {{/if}}

    </div>
  </div>
</div>
{{/ifCond}}
