List Group: With borders 

<div class="kx-listgroup">
    <ul class="kx-list kx-list--borders ">
        <li class="kx-list-item">
            <span class="kx-list-item__icon">
                <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#person"></use>
        </svg>
    </i>
            </span>
            <span class="kx-list-item__text">
                <span class="kx-list-item__primary-text">Jo Anderson</span>
            <span class="kx-list-item__secondary-text">General Manager</span>
            </span>

            <span class="kx-list-item__meta">
                <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#dots-vertical"></use>
        </svg>
    </i>
            </span>
        </li>
        <li class="kx-list-item">
            <span class="kx-list-item__icon">
                <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#person"></use>
        </svg>
    </i>
            </span>
            <span class="kx-list-item__text">
                <span class="kx-list-item__primary-text">Matt Brown</span>
            <span class="kx-list-item__secondary-text">Tech Lead</span>
            </span>

            <span class="kx-list-item__meta">
                <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#dots-vertical"></use>
        </svg>
    </i>
            </span>
        </li>
        <li class="kx-list-item">
            <span class="kx-list-item__icon">
                <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#person"></use>
        </svg>
    </i>
            </span>
            <span class="kx-list-item__text">
                <span class="kx-list-item__primary-text">David Olsen</span>
            <span class="kx-list-item__secondary-text">Senior Developer</span>
            </span>

            <span class="kx-list-item__meta">
                <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#dots-vertical"></use>
        </svg>
    </i>
            </span>
        </li>
        <li class="kx-list-item">
            <span class="kx-list-item__icon">
                <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#person"></use>
        </svg>
    </i>
            </span>
            <span class="kx-list-item__text">
                <span class="kx-list-item__primary-text">Marie Dauglas</span>
            <span class="kx-list-item__secondary-text">User Experience Manager</span>
            </span>

            <span class="kx-list-item__meta">
                <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#dots-vertical"></use>
        </svg>
    </i>
            </span>
        </li>
    </ul>
</div>
 
<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>
 
{
  "title": null,
  "rows": [
    {
      "icon": "person",
      "primaryText": "Jo Anderson",
      "secondaryText": "General Manager",
      "iconRight": true
    },
    {
      "icon": "person",
      "primaryText": "Matt Brown",
      "secondaryText": "Tech Lead",
      "iconRight": true
    },
    {
      "icon": "person",
      "primaryText": "David Olsen",
      "secondaryText": "Senior Developer",
      "iconRight": true
    },
    {
      "icon": "person",
      "primaryText": "Marie Dauglas",
      "secondaryText": "User Experience Manager",
      "iconRight": true
    }
  ],
  "href": null,
  "selected": null,
  "status": null,
  "metadata": null,
  "switch": null,
  "border": true
}

There are no notes for this item.