Card

HTML

<div class="kx-card kx-card--skin-default">
    <header class="kx-card__header">
        <h3 class="kx-card__title">Card title</h3>
    </header>
    <div class="kx-card__body">
        <p>BA card is container for a few short, related pieces of information. It roughly resembles a playing card in size and shape, and is intended as a linked, short representation of a conceptual unit.</p>
    </div>
    <footer class="kx-card__footer">
        <span class="kx-card__cta"><a href="#">LEARN MORE</a></span>
    </footer>
</div>

View

<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>