Card: With bg image 

<div class="kx-card kx-card--skin-default kx-card--has-img">
    <img class="kx-card__img" src="/assets/img/content/480x640(3_2)-cargo.jpg" alt="Alternative text">
    <header class="kx-card__header">
        <h3 class="kx-card__title">Card title</h3>
        <span class="kx-badge kx-inline-flex kx-align-items-center">
            <span class="kx-badge__fill kx-badge--skin-primary kx-inline-flex kx-align-items-center">
            <span class="kx-badge__txt">Badge</span>
        </span>
    </header>
    <div class="kx-card__body">
        <p>A single card will typically include a few different types of media, such as an image, a title, a synopsis, sharing icons, or a call-to-action button — all associated with the same concept.</p>
    </div>
    <footer class="kx-card__footer">
        <span class="kx-card__cta"><a href="#">LEARN MORE</a></span>
    </footer>
</div>
 
<div class="kx-card{% if skin %} kx-card--skin-{{ skin }}{% endif %}{% if bgImg.url %} kx-card--has-img{% endif %}">
    {% if bgImg.url -%}
    <img class="kx-card__img" src="{{ bgImg.url }}" alt="{{ bgImg.alt }}">
    {% endif -%}
    <header class="kx-card__header">
        <h3 class="kx-card__title">{% if cta.href %}{{ title }}{% else %}{{ title }}{% endif %}</h3>
        {% if badges -%}
        <span class="kx-badge kx-inline-flex kx-align-items-center">
            <span class="kx-badge__fill kx-badge--skin-primary kx-inline-flex kx-align-items-center">
            <span class="kx-badge__txt">{{ badges.text }}</span>
        </span>
        {% endif -%}
    </header>
    <div class="kx-card__body">
        <p>{{ content }}</p>
    </div>
    <footer class="kx-card__footer">
        {% if cta.text -%}
          <span class="kx-card__cta">{% if cta.href %}<a href="{{ cta.href }}">{{ cta.text }}</a>{% else %}{{ cta.text }}{% endif %}</span>
        {% endif -%}
    </footer>
</div>
 
{
  "title": "Card title",
  "icon": null,
  "skin": "default",
  "content": "A single card will typically include a few different types of media, such as an image, a title, a synopsis, sharing icons, or a call-to-action button — all associated with the same concept.",
  "bgImg": {
    "url": "/assets/img/content/480x640(3_2)-cargo.jpg",
    "alt": "Alternative text"
  },
  "cta": {
    "text": "LEARN MORE",
    "href": "#",
    "size": "base",
    "skin": "flat",
    "classes": [
      "kx-card__cta"
    ]
  },
  "badges": {
    "text": "Badge"
  }
}

There are no notes for this item.