List

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

<ul class="list-group">
	<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">
			<p class="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</p>
			<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>

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

<ul class="list-group">
	<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">
			<p class="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</p>
			<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>

{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">
			<p class="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</p>
			<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>

{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">
			<p class="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</p>
			<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">
			<p class="list-group-title">
				<a href="#1">Account Example One</a>
			</p>
			<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>