List Group: Default

<div class="kx-listgroup">
    <ul class="kx-list {% if border -%} kx-list--borders {% endif -%} {% if hover -%} kx-list--item-highlight{% endif -%}">
        {% for row in rows -%}
        <li class="kx-list-item{% if row.selected %} kx-is-selected{% endif %}">
            {% if row.checkbox -%}
            <span class="kx-list-item__checkbox">
                {% render '@switch', {type: 'checkbox'} %}
            </span>
            {% endif -%}

            {% if row.icon -%}
            <span class="kx-list-item__icon">
                {% render '@icon', { type: 'icon', symbol: 'person', size: 'moderate' } %}
            </span>
            {% endif -%}

            <span class="kx-list-item__text">
                <span class="kx-list-item__primary-text">{{ row.primaryText }}</span>
                {% if row.secondaryText -%}
                <span class="kx-list-item__secondary-text">{{ row.secondaryText }}</span>
                {% endif -%}
            </span>

            {% if row.iconRight -%}
            <span class="kx-list-item__meta">
                {% render '@icon', { type: 'icon', symbol: 'dots-vertical', size: 'base' } %}
            </span>
            {% endif -%}

            {% if row.metaText -%}
            <span class="kx-list-item__meta">
                {{ row.metaText }}
            </span>
            {% endif -%}
        </li>
        {% endfor -%}
    </ul>
</div>