<div class="kx-listgroup">
<ul class="kx-list ">
<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>
</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>
</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>
</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>
</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"
},
{
"icon": "person",
"primaryText": "Matt Brown",
"secondaryText": "Tech Lead"
},
{
"icon": "person",
"primaryText": "David Olsen",
"secondaryText": "Senior Developer"
},
{
"icon": "person",
"primaryText": "Marie Dauglas",
"secondaryText": "User Experience Manager"
}
],
"href": null,
"selected": null,
"status": null,
"metadata": null,
"switch": null
}
- Handle: @listgroup--listgroup-meta-text
- Variants (6): Default , With icon , With two lines , With icons right , With borders , With row hover
- Preview:
- Filesystem Path: src\components\listgroup\listgroup.njk
- References (2): @switch, @icon
There are no notes for this item.