Clay

List

Description

List is a visual representation of a dataset that provides more flexibility for arranging the data than a table and is less visually explicit than a card view.

Check the Lexicon List Pattern for a more in-depth look at the motivations and proper usage of this component.

Row states

Default states

  • Account Example One

    Second Level Text

    • {call ClayList.render}
	{param items: [
		[
			'actionItems': [
				[
					'href': '#1',
					'icon': 'trash',
					'label': 'Option 1',
					'quickAction': true
				],
				[
					'href': '#2',
					'icon': 'download',
					'label': 'Option 2',
					'quickAction': true,
					'separator': true
				],
				[
					'href': '#3',
					'icon': 'info-circle-open',
					'label': 'Option 3',
					'quickAction': true
				]
			],
			'description': 'Second Level Text',
			'href': '#1',
			'title': 'Account Example One'
		]
	] /}
	{param schema: [
		'fields': [
			[
				'contentRenderer': 'icon',
				'fieldName': 'status',
				'iconsMap': [
					'*': 'folder'
				],
				'iconShapesMap': [
					'*': 'rounded'
				]
			],
			[
				'contentRenderer': 'content',
				'fieldsMap': [
					'description': 'description',
					'href': 'href',
					'title': 'title'
				],
				'labelStylesMap': [
					'Approved': 'success'
				]
			]
		],
		'inputNameField': 'type',
		'inputNamesMap': [
			'*': 'folder'
		],
		'inputValueField': 'id'
	] /}
	{param selectable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
{/call}
    <clay-list
	items='[
		{
			"actionItems": [
				{
					"href": "#1",
					"icon": "trash",
					"label": "Option 1",
					"quickAction": true
				},
				{
					"href": "#2",
					"icon": "download",
					"label": "Option 2",
					"quickAction": true,
					"separator": true
				},
				{
					"href": "#3",
					"icon": "info-circle-open",
					"label": "Option 3",
					"quickAction": true
				}
			],
			"description": "Second Level Text",
			"href": "#1",
			"title": "Account Example One"
		}
	]'
	schema='[
		"fields": [
			{
				"contentRenderer": "icon",
				"fieldName": "status",
				"iconsMap": {
					"*": "folder"
				},
				"iconShapesMap": {
					"*": "rounded"
				}
			},
			{
				"contentRenderer": "content",
				"fieldsMap": {
					"description": "description",
					"href": "href",
					"title": "title"
				},
				"labelStylesMap": [
					"Approved": "success"
				]
			}
		],
		"inputNameField": "type",
		"inputNamesMap": [
			"*": "folder"
		],
		"inputValueField": "id"
	]'
	selectable="true"
	spritemap="/images/icons/icons.svg">
</clay-list>
    <li class="list-group-item list-group-item-flex">
	<div class="autofit-col">
		<div class="custom-control custom-checkbox">
			<label>
				<input class="custom-control-input" type="checkbox"/>
				<span class="custom-control-indicator"></span>
			</label>
		</div>
	</div>
	<div class="autofit-col">
		<div class="sticker sticker-secondary">
			<span class="inline-item">
				<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#folder" />
				</svg>
			</span>
		</div>
	</div>
	<div class="autofit-col autofit-col-expand">
		<h4 class="list-group-title text-truncate">
			<a href="#1">Account Example One</a>
		</h4>
		<p class="list-group-subtitle text-truncate">Second Level Text</p>
	</div>
	<div class="autofit-col">
		<div class="quick-action-menu">
			<a class="component-action quick-action-item" href="#1" role="button">
				<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#trash" />
				</svg>
			</a>
			<a class="component-action quick-action-item" href="#1" role="button">
				<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#download" />
				</svg>
			</a>
			<a class="component-action quick-action-item" href="#1" role="button">
				<svg class="lexicon-icon lexicon-icon-info-circle-open" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#info-circle-open" />
				</svg>
			</a>
		</div>
		<div class="dropdown dropdown-action">
			<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
				<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#ellipsis-v" />
				</svg>
			</a>
			<div aria-labelledby="" class="dropdown-menu dropdown-menu-right">
				<ul class="list-unstyled">
					<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
					<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
					<li><a class="dropdown-item" href="#1" role="button">Move</a></li>
					<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
				</ul>
			</div>
		</div>
	</div>
</li>

    Selected state

  • Account Example One

    Second Level Text

    • {call ClayList.render}
	{param items: [
		[
			'actionItems': [
				[
					'href': '#1',
					'icon': 'trash',
					'label': 'Option 1',
					'quickAction': true
				],
				[
					'href': '#2',
					'icon': 'download',
					'label': 'Option 2',
					'quickAction': true,
					'separator': true
				],
				[
					'href': '#3',
					'icon': 'info-circle-open',
					'label': 'Option 3',
					'quickAction': true
				]
			],
			'description': 'Second Level Text',
			'href': '#1',
			'selected': true,
			'title': 'Account Example One'
		]
	] /}
	{param schema: [
		'fields': [
			[
				'contentRenderer': 'icon',
				'fieldName': 'status',
				'iconsMap': [
					'*': 'folder'
				],
				'iconShapesMap': [
					'*': 'rounded'
				]
			],
			[
				'contentRenderer': 'content',
				'fieldsMap': [
					'description': 'description',
					'href': 'href',
					'title': 'title'
				],
				'labelStylesMap': [
					'Approved': 'success'
				]
			]
		],
		'inputNameField': 'type',
		'inputNamesMap': [
			'*': 'folder'
		],
		'inputValueField': 'id'
	] /}
	{param selectable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
{/call}
    <clay-list
	items='[
		{
			"actionItems": [
				{
					"href": "#1",
					"icon": "trash",
					"label": "Option 1",
					"quickAction": true
				},
				{
					"href": "#2",
					"icon": "download",
					"label": "Option 2",
					"quickAction": true,
					"separator": true
				},
				{
					"href": "#3",
					"icon": "info-circle-open",
					"label": "Option 3",
					"quickAction": true
				}
			],
			"description": "Second Level Text",
			"href": "#1",
			"selected": true,
			"title": "Account Example One"
		}
	]'
	schema='[
		"fields": [
			{
				"contentRenderer": "icon",
				"fieldName": "status",
				"iconsMap": {
					"*": "folder"
				},
				"iconShapesMap": {
					"*": "rounded"
				}
			},
			{
				"contentRenderer": "content",
				"fieldsMap": {
					"description": "description",
					"href": "href",
					"title": "title"
				},
				"labelStylesMap": [
					"Approved": "success"
				]
			}
		],
		"inputNameField": "type",
		"inputNamesMap": [
			"*": "folder"
		],
		"inputValueField": "id"
	]'
	selectable="true"
	spritemap="/images/icons/icons.svg">
</clay-list>
    <li class="list-group-item list-group-item-flex active">
	<div class="autofit-col">
		<div class="custom-control custom-checkbox">
			<label>
				<input checked class="custom-control-input" type="checkbox"/>
				<span class="custom-control-label"></span>
			</label>
		</div>
	</div>
	<div class="autofit-col">
		<div class="sticker sticker-secondary">
			<span class="inline-item">
				<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#folder" />
				</svg>
			</span>
		</div>
	</div>
	<div class="autofit-col autofit-col-expand">
		<h4 class="list-group-title text-truncate">
			<a href="#1">Account Example One</a>
		</h4>
		<p class="list-group-subtitle text-truncate">Second Level Text</p>
	</div>
	<div class="autofit-col">
		<div class="quick-action-menu">
			<a class="component-action quick-action-item" href="#1" role="button">
				<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#trash" />
				</svg>
			</a>
			<a class="component-action quick-action-item" href="#1" role="button">
				<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#download" />
				</svg>
			</a>
			<a class="component-action quick-action-item" href="#1" role="button">
				<svg class="lexicon-icon lexicon-icon-info-circle-open" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#info-circle-open" />
				</svg>
			</a>
		</div>
		<div class="dropdown dropdown-action">
			<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
				<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#ellipsis-v" />
				</svg>
			</a>
			<div aria-labelledby="" class="dropdown-menu dropdown-menu-right">
				<ul class="list-unstyled">
					<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
					<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
					<li><a class="dropdown-item" href="#1" role="button">Move</a></li>
					<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
				</ul>
			</div>
		</div>
	</div>
</li>

    Sections

    List sections help separate content by a specific category or type.

    {call ClayList.render}
	{param items: [
		[
			items: [
				[
					'actionItems': [
						[
							'href': '#1',
							'icon': 'trash',
							'label': 'Option 1',
							'quickAction': true
						],
						[
							'href': '#2',
							'icon': 'download',
							'label': 'Option 2',
							'quickAction': true,
							'separator': true
						],
						[
							'href': '#3',
							'icon': 'info-circle-open',
							'label': 'Option 3',
							'quickAction': true
						]
					],
					'description': 'Second Level Text',
					'href': '#1',
					'selected': true,
					'title': 'Account Example One'
				]
			],
			'label': 'List Section'
		]
	] /}
	{param schema: [
		'fields': [
			[
				'contentRenderer': 'icon',
				'fieldName': 'status',
				'iconsMap': [
					'*': 'folder'
				],
				'iconShapesMap': [
					'*': 'rounded'
				]
			],
			[
				'contentRenderer': 'content',
				'fieldsMap': [
					'description': 'description',
					'href': 'href',
					'title': 'title'
				],
				'labelStylesMap': [
					'Approved': 'success'
				]
			]
		],
		'inputNameField': 'type',
		'inputNamesMap': [
			'*': 'folder'
		],
		'inputValueField': 'id'
	] /}
	{param selectable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
{/call}
    <clay-list
	items='[
		{
			items: [
				{
					"actionItems": [
						{
							"href": "#1",
							"icon": "trash",
							"label": "Option 1",
							"quickAction": true
						},
						{
							"href": "#2",
							"icon": "download",
							"label": "Option 2",
							"quickAction": true,
							"separator": true
						},
						{
							"href": "#3",
							"icon": "info-circle-open",
							"label": "Option 3",
							"quickAction": true
						}
					],
					"description": "Second Level Text",
					"href": "#1",
					"selected": true,
					"title": "Account Example One"
				}
			]
		}
	]'
	schema='[
		"fields": [
			{
				"contentRenderer": "icon",
				"fieldName": "status",
				"iconsMap": {
					"*": "folder"
				},
				"iconShapesMap": {
					"*": "rounded"
				}
			},
			{
				"contentRenderer": "content",
				"fieldsMap": {
					"description": "description",
					"href": "href",
					"title": "title"
				},
				"labelStylesMap": [
					"Approved": "success"
				]
			}
		],
		"inputNameField": "type",
		"inputNamesMap": [
			"*": "folder"
		],
		"inputValueField": "id"
	]'
	selectable="true"
	spritemap="/images/icons/icons.svg">
</clay-list>
    <ul class="list-group show-quick-actions-on-hover">
	<li class="list-group-header">
		<h3 class="list-group-header-title">List Section</h3>
	</li>
	<li class="list-group-item list-group-item-flex">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox"/>
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#folder" />
					</svg>
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<h4 class="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</h4>
			<p class="list-group-subtitle text-truncate">Second Level Text</p>
		</div>
		<div class="autofit-col">
			<div class="quick-action-menu">
				<a class="component-action quick-action-item" href="#1" role="button">
					<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#trash" />
					</svg>
				</a>
				<a class="component-action quick-action-item" href="#1" role="button">
					<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#download" />
					</svg>
				</a>
				<a class="component-action quick-action-item" href="#1" role="button">
					<svg class="lexicon-icon lexicon-icon-info-circle-open" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#info-circle-open" />
					</svg>
				</a>
			</div>
			<div class="dropdown dropdown-action">
				<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
					<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#ellipsis-v" />
					</svg>
				</a>
				<div aria-labelledby="" class="dropdown-menu dropdown-menu-right">
					<ul class="list-unstyled">
						<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
						<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
						<li><a class="dropdown-item" href="#1" role="button">Move</a></li>
						<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
					</ul>
				</div>
			</div>
		</div>
	</li>
</ul>

    Example of use

    Align content inside a .list-group-item element with a flexbox with .list-group-item-flex.

    Use a combination of .flex-col and .flex-col.flex-col-expand to control the size of each cell.

    Add the class show-dropdown-action-on-active to display dropdown-menus when active in List Groups.

    Direct descendants of flex-col become block level elements by default. See https://www.w3.org/TR/css-flexbox-1/#flex-items. If you want to display content using floats, inline, or inline-block, wrap the content with a block level element such as a div. 
    {call ClayList.render}
	{param items: [
		[
			items: [
				[
					'actionItems': [
						[
							'href': '#1',
							'icon': 'trash',
							'label': 'Option 1',
							'quickAction': true
						],
						[
							'href': '#2',
							'icon': 'download',
							'label': 'Option 2',
							'quickAction': true,
							'separator': true
						],
						[
							'href': '#3',
							'icon': 'info-circle-open',
							'label': 'Option 3',
							'quickAction': true
						]
					],
					'description': 'Second Level Text',
					'href': '#1',
					'status': ['Approved'],
					'title': 'Account Example One'
				],
				[
					'actionItems': [
						[
							'href': '#1',
							'icon': 'trash',
							'label': 'Option 1',
							'quickAction': true
						],
						[
							'href': '#2',
							'icon': 'download',
							'label': 'Option 2',
							'quickAction': true,
							'separator': true
						],
						[
							'href': '#3',
							'icon': 'info-circle-open',
							'label': 'Option 3',
							'quickAction': true
						]
					],
					'description': 'Second Level Text',
					'href': '#1',
					'selected': true,
					'status': ['Approved'],
					'title': 'Account Example One'
				]
			],
			'label': 'List Section'
		]
	] /}
	{param schema: [
		'fields': [
			[
				'contentRenderer': 'icon',
				'fieldName': 'status',
				'iconsMap': [
					'*': 'folder'
				],
				'iconShapesMap': [
					'*': 'rounded'
				]
			],
			[
				'contentRenderer': 'content',
				'fieldsMap': [
					'description': 'description',
					'href': 'href',
					'labels': 'status'
					'title': 'title'
				],
				'labelStylesMap': [
					'Approved': 'success'
				]
			]
		],
		'inputNameField': 'type',
		'inputNamesMap': [
			'*': 'folder'
		],
		'inputValueField': 'id'
	] /}
	{param selectable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
{/call}
    <clay-list
	items='[
		{
			items: [
				{
					"actionItems": [
						{
							"href": "#1",
							"icon": "trash",
							"label": "Option 1",
							"quickAction": true
						},
						{
							"href": "#2",
							"icon": "download",
							"label": "Option 2",
							"quickAction": true,
							"separator": true
						},
						{
							"href": "#3",
							"icon": "info-circle-open",
							"label": "Option 3",
							"quickAction": true
						}
					],
					"description": "Second Level Text",
					"href": "#1",
					"status": ["Approved"],
					"title": "Account Example One"
				},
				{
					"actionItems": [
						{
							"href": "#1",
							"icon": "trash",
							"label": "Option 1",
							"quickAction": true
						},
						{
							"href": "#2",
							"icon": "download",
							"label": "Option 2",
							"quickAction": true,
							"separator": true
						},
						{
							"href": "#3",
							"icon": "info-circle-open",
							"label": "Option 3",
							"quickAction": true
						}
					],
					"description": "Second Level Text",
					"href": "#1",
					"selected": true,
					"status": ["Approved"],
					"title": "Account Example One"
				}
			]
		}
	]',
	schema='[
		"fields": [
			{
				"contentRenderer": "icon",
				"fieldName": "status",
				"iconsMap": {
					"*": "folder"
				},
				"iconShapesMap": {
					"*": "rounded"
				}
			},
			{
				"contentRenderer": "content",
				"fieldsMap": {
					"description": "description",
					"href": "href",
					"labels": "status",
					"title": "title"
				},
				"labelStylesMap": [
					"Approved": "success"
				]
			}
		],
		"inputNameField": "type",
		"inputNamesMap": [
			"*": "folder"
		],
		"inputValueField": "id"
	]'
	selectable="true"
	spritemap="/images/icons/icons.svg">
</clay-list>
    <ul class="list-group show-quick-actions-on-hover">
	<li class="list-group-header">
		<h3 class="list-group-header-title">List Section</h3>
	</li>
	<li class="list-group-item list-group-item-flex">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox"/>
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#folder" />
					</svg>
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<h4 class="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</h4>
			<p class="list-group-subtitle text-truncate">Second Level Text</p>
			<div class="list-group-detail">
				<span class="label label-success">
					<span class="label-item label-item-expand">Approved</span>
				</span>
			</div>
		</div>
		<div class="autofit-col">
			<div class="quick-action-menu">
				<a class="component-action quick-action-item" href="#1" role="button">
					<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#trash" />
					</svg>
				</a>
				<a class="component-action quick-action-item" href="#1" role="button">
					<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#download" />
					</svg>
				</a>
				<a class="component-action quick-action-item" href="#1" role="button">
					<svg class="lexicon-icon lexicon-icon-info-circle-open" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#info-circle-open" />
					</svg>
				</a>
			</div>
			<div class="dropdown dropdown-action">
				<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
					<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#ellipsis-v" />
					</svg>
				</a>
				<div aria-labelledby="" class="dropdown-menu dropdown-menu-right">
					<ul class="list-unstyled">
						<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
						<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
						<li><a class="dropdown-item" href="#1" role="button">Move</a></li>
						<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
					</ul>
				</div>
			</div>
		</div>
	</li>
	<li class="list-group-item list-group-item-flex active">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input checked class="custom-control-input" type="checkbox"/>
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#folder" />
					</svg>
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<h4 class="list-group-title">
				<a href="#1">Account Example One</a>
			</h4>
			<p class="list-group-subtitle">Second Level Text</p>
			<div class="list-group-detail">
				<span class="label label-success">
					<span class="label-item label-item-expand">Approved</span>
				</span>
			</div>
		</div>
		<div class="autofit-col">
			<div class="quick-action-menu">
				<a class="component-action quick-action-item" href="#1" role="button">
					<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#trash" />
					</svg>
				</a>
				<a class="component-action quick-action-item" href="#1" role="button">
					<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#download" />
					</svg>
				</a>
				<a class="component-action quick-action-item" href="#1" role="button">
					<svg class="lexicon-icon lexicon-icon-info-circle-open" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#info-circle-open" />
					</svg>
				</a>
			</div>
			<div class="dropdown dropdown-action">
				<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
					<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#ellipsis-v" />
					</svg>
				</a>
				<div aria-labelledby="" class="dropdown-menu dropdown-menu-right">
					<ul class="list-unstyled">
						<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
						<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
						<li><a class="dropdown-item" href="#1" role="button">Move</a></li>
						<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
					</ul>
				</div>
			</div>
		</div>
	</li>
</ul>

    More examples can be found in dataset template.

    API

    Property Description Type Required Default
    elementClasses
    		 CSS classes to be applied to the element. string|undefined false undefined
    id
    		 Id to be applied to the element. string|undefined false undefined
    items
    		 List of items. array|undefined false undefined
    selectable
    		 Flag to indicate if the list group items are selectable. bool|undefined false false
    schema
    		 Schema mapping list item fields with item data properties. object true undefined
    spritemap
    		 The path to the SVG spritemap file containing the icons. string|undefined false undefined