notifications-admin/app/templates/components/guides/cards.html

<ul class="usa-card-group grid-row flex-row">
  {% for item in card_contents %}
  <li class="usa-card grid-col mobile-lg:grid-col-12 tablet:grid-col-6 desktop:grid-col-4 {% if item.link %}linked-card linked-content{% endif %}">
    {% if item.link %}
    <a href="{{ item.link }}">
    {% endif %}
    <div class="usa-card__container">
      {% if item.card_heading %}
      <div class="usa-card__header">
          <h3
            class="usa-card__heading {% if text_align != 'left' or text_align is not defined %}text-center{% else %}text-left{% endif %} {% if item.link %}linked-card{% endif %}">
            {{ item.card_heading }}
          </h3>
          {% if item.link %}
        {% endif %}
      </div>
      {% endif %}
      {% if item.svg_src or item.image_src%}
      <div class="usa-card__media usa-card__media--inset">
        {% if item.svg_src %}
        <svg aria-hidden="true" focusable="false" role="img" class="best-practices_card_img">
          <use xlink:href="{{asset_url('images/best-practices-card-sprite.svg')}}#{{item.svg_src}}"></use>
        </svg>
        {% endif %}
        {% if item.image_src %}
        <img class="best-practices_card_img" src="{{item.image_src}}" alt="{{ item.alt_text }}" />
        {% endif %}
      </div>
      {% endif %}
      {% if item.p_text %}
      <div class="usa-card__body">
        <p
          class="{% if text_align != 'left' or text_align is not defined %}text-center{% else %}text-left{% endif %} {% if item.link %}linked-card{% endif %}">
          {{item.p_text|safe}}
        </p>
      </div>
      {% endif %}
    </div>
    {% if item.link %}
    </a>
    {% endif %}
  </li>
  {% endfor %}
</ul>