﻿<section class="section" id="entity-list">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#entity-list">Entity list</a>
        </h1>
    </header>
    <div class="row">
        <div class="col-xs-24">
            <p>List items with nested UI as used in the Windows Settings app, with the option to make the items expandable.</p>
		</div>
		<div class="col-xs-24">
			<h4 class="section-title">
				Expandable entity list
			</h4>
		</div>
        <div class="col-md-12 p-r-sm p-v-xxs">
			<div class="entity-list entity-list-expandable">
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-mail"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">25.3 MB</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Mail and Calendar</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
						<div class="progress">
							<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="sr-only">60%</span>
							</div>
						</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default" disabled="disabled">Uninstall</button>
						<button class="btn btn-default">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-camera"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">44.5 MB</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Camera</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default" disabled="disabled">Uninstall</button>
						<button class="btn btn-default">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-report-hacked"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">Unavailable</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Defender</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default" disabled="disabled">Uninstall</button>
						<button class="btn btn-default" disabled="disabled">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<img src="http://lorempixel.com/30/30/technics"/>
					</div>
					<div class="item-content-secondary">
						<div  class="content-text-primary">Unavailable</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">App</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<a href="#" class="btn btn-link btn-block">Advanced options</a>
						<button class="btn btn-default">Uninstall</button>
						<button class="btn btn-default">Move</button>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12 p-v-xxs color-bg-dark-vivid-high">
			<div class="entity-list entity-list-expandable theme-alt">
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-mail"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">25.3 MB</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Mail and Calendar</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
						<div class="progress theme-alt">
							<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="sr-only">60%</span>
							</div>
						</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
						<button class="btn btn-default theme-alt">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-camera"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">44.5 MB</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Camera</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
						<button class="btn btn-default theme-alt">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-report-hacked"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">Unavailable</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Defender</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
						<button class="btn btn-default theme-alt" disabled="disabled">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<img src="http://lorempixel.com/30/30/technics"/>
					</div>
					<div class="item-content-secondary">
						<div  class="content-text-primary">Unavailable</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">App</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<a href="#" class="btn btn-link btn-block theme-alt">Advanced options</a>
						<button class="btn btn-default theme-alt">Uninstall</button>
						<button class="btn btn-default theme-alt">Move</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-24">
			{{#markdown}}
```xml
	<div class="entity-list entity-list-expandable">
	<div class="entity-list-item">
		<div class="item-icon">
			<span class="glyph glyph-mail"></span>
		</div>
		<div class="item-content-secondary">
			<div class="content-text-primary">25.3 MB</div>
			<div class="content-text-secondary">25/08/2016</div>
		</div>
		<div class="item-content-primary">
			<div class="content-text-primary">Mail and Calendar</div>
			<div class="content-text-secondary">Microsoft Corporation</div>
			<div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
					<span class="sr-only">60%</span>
				</div>
			</div>
		</div>
		<div class="item-content-expanded">
			<button class="btn btn-default" disabled="disabled">Uninstall</button>
			<button class="btn btn-default">Move</button>
		</div>
	</div>
	<div class="entity-list-item">
		<div class="item-icon">
			<span class="glyph glyph-camera"></span>
		</div>
		<div class="item-content-secondary">
			<div class="content-text-primary">44.5 MB</div>
			<div class="content-text-secondary">25/08/2016</div>
		</div>
		<div class="item-content-primary">
			<div class="content-text-primary">Camera</div>
			<div class="content-text-secondary">Microsoft Corporation</div>
		</div>
		<div class="item-content-expanded">
			<button class="btn btn-default" disabled="disabled">Uninstall</button>
			<button class="btn btn-default">Move</button>
		</div>
	</div>
	<div class="entity-list-item">
		<div class="item-icon">
			<span class="glyph glyph-report-hacked"></span>
		</div>
		<div class="item-content-secondary">
			<div class="content-text-primary">Unavailable</div>
			<div class="content-text-secondary">25/08/2016</div>
		</div>
		<div class="item-content-primary">
			<div class="content-text-primary">Defender</div>
			<div class="content-text-secondary">Microsoft Corporation</div>
		</div>
		<div class="item-content-expanded">
			<button class="btn btn-default" disabled="disabled">Uninstall</button>
			<button class="btn btn-default" disabled="disabled">Move</button>
		</div>
	</div>
	<div class="entity-list-item">
		<div class="item-icon">
			<img src="http://lorempixel.com/30/30/technics"/>
		</div>
		<div class="item-content-secondary">
			<div class="content-text-primary">Unavailable</div>
			<div class="content-text-secondary">25/08/2016</div>
		</div>
		<div class="item-content-primary">
			<div class="content-text-primary">App</div>
			<div class="content-text-secondary">Microsoft Corporation</div>
		</div>
		<div class="item-content-expanded">
			<a href="#" class="btn btn-link btn-block">Advanced options</a>
			<button class="btn btn-default">Uninstall</button>
			<button class="btn btn-default">Move</button>
		</div>
	</div>
</div>
```
            {{/markdown}}
		</div>
	</div>
	<div class="row">
		<div class="col-xs-24">
			<h4 class="section-title">
				Non-expandable entity list
			</h4>
		</div>
        <div class="col-md-12 p-r-sm p-v-xxs">
			<div class="entity-list">
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-mail"></span>
					</div>
					<div class="item-content-secondary">
						<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Mail and Calendar</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-camera"></span>
					</div>
					<div class="item-content-secondary">
						<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Camera</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-report-hacked"></span>
					</div>
					<div class="item-content-secondary">
						<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Defender</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-mail"></span>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Mail and Calendar</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
						<div class="progress">
							<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="sr-only">60%</span>
							</div>
						</div>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<img src="http://lorempixel.com/30/30/technics"/>
					</div>
					<div class="item-content-secondary">
						<div  class="content-text-primary">Unavailable</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">App</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12 p-v-xxs color-bg-dark-vivid-high">
			<div class="entity-list theme-alt">
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-mail"></span>
					</div>
					<div class="item-content-secondary">
						<button type="button" data-toggle="button" class="btn btn-toggle-switch theme-alt" autocomplete="off" aria-pressed="false">
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Mail and Calendar</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-camera"></span>
					</div>
					<div class="item-content-secondary">
						<button type="button" data-toggle="button" class="btn btn-toggle-switch theme-alt" autocomplete="off" aria-pressed="false">
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Camera</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-report-hacked"></span>
					</div>
					<div class="item-content-secondary">
						<button type="button" data-toggle="button" class="btn btn-toggle-switch theme-alt" autocomplete="off" aria-pressed="false">
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Defender</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-mail"></span>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Mail and Calendar</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
						<div class="progress theme-alt">
							<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="sr-only">60%</span>
							</div>
						</div>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<img src="http://lorempixel.com/30/30/technics"/>
					</div>
					<div class="item-content-secondary">
						<div  class="content-text-primary">Unavailable</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">App</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-24">
			{{#markdown}}
```xml
	<div class="entity-list">
	<div class="entity-list-item">
		<div class="item-icon">
			<span class="glyph glyph-mail"></span>
		</div>
		<div class="item-content-secondary">
			<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
		</div>
		<div class="item-content-primary">
			<div class="content-text-primary">Mail and Calendar</div>
			<div class="content-text-secondary">Microsoft Corporation</div>
		</div>
	</div>
	<div class="entity-list-item">
		<div class="item-icon">
			<span class="glyph glyph-camera"></span>
		</div>
		<div class="item-content-secondary">
			<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
		</div>
		<div class="item-content-primary">
			<div class="content-text-primary">Camera</div>
			<div class="content-text-secondary">Microsoft Corporation</div>
		</div>
	</div>
	<div class="entity-list-item">
		<div class="item-icon">
			<span class="glyph glyph-report-hacked"></span>
		</div>
		<div class="item-content-secondary">
			<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
		</div>
		<div class="item-content-primary">
			<div class="content-text-primary">Defender</div>
			<div class="content-text-secondary">Microsoft Corporation</div>
		</div>
	</div>
	<div class="entity-list-item">
		<div class="item-icon">
			<span class="glyph glyph-mail"></span>
		</div>
		<div class="item-content-primary">
			<div class="content-text-primary">Mail and Calendar</div>
			<div class="content-text-secondary">Microsoft Corporation</div>
			<div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
					<span class="sr-only">60%</span>
				</div>
			</div>
		</div>
	</div>
	<div class="entity-list-item">
		<div class="item-icon">
			<img src="http://lorempixel.com/30/30/technics"/>
		</div>
		<div class="item-content-secondary">
			<div  class="content-text-primary">Unavailable</div>
		</div>
		<div class="item-content-primary">
			<div class="content-text-primary">App</div>
			<div class="content-text-secondary">Microsoft Corporation</div>
		</div>
	</div>
</div>
```
            {{/markdown}}
		</div>
	</div>
	<div class="row">
		<div class="col-xs-24">
			<h4 class="section-title">
				Entity list Add Item button
			</h4>
		</div>
        <div class="col-md-12 p-r-sm p-v-xxs">
			<div class="entity-list entity-list-add-item-button">
				<a class="entity-list-item" href="#">
					<div class="item-icon">
						<span class="glyph glyph-add"></span>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Add features</div>
					</div>
				</a>
			</div>
			<div class="entity-list entity-list-expandable">
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-mail"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">25.3 MB</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Mail and Calendar</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
						<div class="progress">
							<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="sr-only">60%</span>
							</div>
						</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default" disabled="disabled">Uninstall</button>
						<button class="btn btn-default">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-camera"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">44.5 MB</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Camera</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default" disabled="disabled">Uninstall</button>
						<button class="btn btn-default">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-report-hacked"></span>
					</div>
					<div class="item-content-secondary">
						<div  class="content-text-primary">Unavailable</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Defender</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default" disabled="disabled">Uninstall</button>
						<button class="btn btn-default" disabled="disabled">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<img src="http://lorempixel.com/30/30/technics"/>
					</div>
					<div class="item-content-secondary">
						<div  class="content-text-primary">Unavailable</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">App</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<a href="#" class="btn btn-link btn-block">Advanced options</a>
						<button class="btn btn-default">Uninstall</button>
						<button class="btn btn-default">Move</button>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12 p-v-xxs color-bg-dark-vivid-high">
			<div class="entity-list entity-list-add-item-button theme-alt">
				<a class="entity-list-item" href="#">
					<div class="item-icon">
						<span class="glyph glyph-add"></span>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Add an item</div>
					</div>
				</a>
			</div>
			<div class="entity-list entity-list-expandable theme-alt">
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-mail"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">25.3 MB</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Mail and Calendar</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
						<div class="progress theme-alt">
							<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="sr-only">60%</span>
							</div>
						</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
						<button class="btn btn-default theme-alt">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-camera"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">44.5 MB</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Camera</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
						<button class="btn btn-default theme-alt">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<span class="glyph glyph-report-hacked"></span>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">Unavailable</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">Defender</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
						<button class="btn btn-default theme-alt" disabled="disabled">Move</button>
					</div>
				</div>
				<div class="entity-list-item">
					<div class="item-icon">
						<img src="http://lorempixel.com/30/30/technics"/>
					</div>
					<div class="item-content-secondary">
						<div class="content-text-primary">Unavailable</div>
						<div class="content-text-secondary">25/08/2016</div>
					</div>
					<div class="item-content-primary">
						<div class="content-text-primary">App</div>
						<div class="content-text-secondary">Microsoft Corporation</div>
					</div>
					<div class="item-content-expanded">
						<a href="#" class="btn btn-link btn-block theme-alt">Advanced options</a>
						<button class="btn btn-default theme-alt">Uninstall</button>
						<button class="btn btn-default theme-alt">Move</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-24">
			{{#markdown}}
```xml
	<div class="entity-list entity-list-add-item-button">
	<a class="entity-list-item" href="#">
		<div class="item-icon">
			<span class="glyph glyph-add"></span>
		</div>
		<div class="item-content-primary">
			<div class="content-text-primary">Add an item</div>
		</div>
	</a>
</div>
```
            {{/markdown}}
		</div>
    </div>
</section>
