List

Lists are a visual representation of a dataset, based on groups of related content, that is organized vertically.

install	yarn add @clayui/list
version
use	`import List from '@clayui/list';`

Table of Contents

Example
Variations
Default
Notification
Group Elements
Header
Items
Items as Links and Buttons
Actions on Hover
Anchors
Buttons
Active

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

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

Example

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.

List Section
Account Example One
Second Level Text
Third Level Text
Approved
Account Example One
Second Level Text
Third Level Text
Approved

<ul className="list-group show-quick-actions-on-hover">
	<li className="list-group-header">
		<h3 className="list-group-header-title">List Section</h3>
	</li>
	<li className="list-group-item list-group-item-flex">
		<div className="autofit-col">
			<div className="custom-control custom-checkbox">
				<label>
					<input className="custom-control-input" type="checkbox" />
					<span className="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div className="autofit-col">
			<div className="sticker sticker-secondary">
				<span className="inline-item"> ... </span>
			</div>
		</div>
		<div className="autofit-col autofit-col-expand">
			<p className="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</p>
			<p className="list-group-text text-truncate">Second Level Text</p>
			<p className="list-group-subtext">Third Level Text</p>
			<div className="list-group-detail">
				<span className="label label-success">
					<span className="label-item label-item-expand"
						>Approved</span
					>
				</span>
			</div>
		</div>
		<div className="autofit-col">
			<div className="quick-action-menu">
				<a
					aria-label="Delete"
					title="Delete"
					className="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					aria-label="Download"
					title="Download"
					className="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					aria-label="Info"
					title="Info"
					className="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
			</div>
			<div className="dropdown dropdown-action">...</div>
		</div>
	</li>
	<li className="list-group-item list-group-item-flex active">
		<div className="autofit-col">
			<div className="custom-control custom-checkbox">
				<label>
					<input
						checked
						className="custom-control-input"
						type="checkbox"
					/>
					<span className="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div className="autofit-col">
			<div className="sticker sticker-secondary">
				<span className="inline-item"> ... </span>
			</div>
		</div>
		<div className="autofit-col autofit-col-expand">
			<p className="list-group-title">
				<a href="#1">Account Example One</a>
			</p>
			<p className="list-group-text">Second Level Text</p>
			<p className="list-group-subtext">Third Level Text</p>
			<div className="list-group-detail">
				<span className="label label-success">
					<span className="label-item label-item-expand"
						>Approved</span
					>
				</span>
			</div>
		</div>
		<div className="autofit-col">
			<div className="quick-action-menu">
				<a
					aria-label="Delete"
					title="Delete"
					className="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					aria-label="Download"
					title="Download"
					className="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					aria-label="Info"
					title="Info"
					className="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
			</div>
			<div className="dropdown dropdown-action">...</div>
		</div>
	</li>
</ul>

Variations

Default

Account Example One
Second Level Text

<ul className="list-group">
	<li className="list-group-item list-group-item-flex">
		<div className="autofit-col">
			<div className="custom-control custom-checkbox">
				<label>
					<input className="custom-control-input" type="checkbox" />
					<span className="custom-control-indicator"></span>
				</label>
			</div>
		</div>
		<div className="autofit-col">
			<div className="sticker sticker-secondary">...</div>
		</div>
		<div className="autofit-col autofit-col-expand">
			<p className="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</p>
			<p className="list-group-subtitle text-truncate">
				Second Level Text
			</p>
		</div>
		<div className="autofit-col">
			<div className="dropdown dropdown-action">...</div>
		</div>
	</li>
</ul>

Notification

Account Example One
Second Level Text
Account Example Two
Second Level Text

<ul className="list-group list-group-notification">
	<li
		className="list-group-item list-group-item-flex list-group-item-primary"
	>
		<div className="autofit-col">
			<div className="custom-control custom-checkbox">...</div>
		</div>
		<div className="autofit-col">
			<div className="sticker sticker-secondary">
				<span className="inline-item"> ... </span>
			</div>
		</div>
		<div className="autofit-col autofit-col-expand">
			<section className="autofit-section">
				<div className="list-group-title">
					<a href="#1">Account Example One</a>
				</div>
				<p className="list-group-text">Second Level Text</p>
			</section>
		</div>
		<div className="autofit-col">
			<div className="dropdown dropdown-action">...</div>
		</div>
	</li>
	<li className="list-group-item list-group-item-flex">
		<div className="autofit-col">
			<div className="custom-control custom-checkbox">
				<label>
					<input className="custom-control-input" type="checkbox" />
					<span className="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div className="autofit-col">
			<div className="sticker sticker-secondary">
				<span className="inline-item"> ... </span>
			</div>
		</div>
		<div className="autofit-col autofit-col-expand">
			<section className="autofit-section">
				<div className="list-group-title">
					<a href="#1">Account Example Two</a>
				</div>
				<p className="list-group-text">Second Level Text</p>
			</section>
		</div>
		<div className="autofit-col">
			<div className="dropdown dropdown-action">...</div>
		</div>
	</li>
</ul>

Group Elements

Header

Use the .list-group-header and .list-group-header-title class.

List Group Header
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
Second Level Text
Approved

<ul className="list-group">
	<li className="list-group-header">
		<h3 className="list-group-header-title">List Group Header</h3>
	</li>
	<li className="list-group-item list-group-item-flex">
		<div className="autofit-col">
			<div className="custom-control custom-checkbox">
				<label>
					<input className="custom-control-input" type="checkbox" />
					<span className="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div className="autofit-col">
			<div className="sticker sticker-secondary">
				<span className="inline-item"> ... </span>
			</div>
		</div>
		<div className="autofit-col autofit-col-expand">
			<section className="autofit-section">
				<div className="list-group-title">
					<span className="text-truncate-inline">
						<a className="text-truncate" href="#1"
							>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</a
						>
					</span>
				</div>
				<p className="list-group-text">
					<span className="text-truncate-inline">
						<span className="text-truncate">Second Level Text</span>
					</span>
				</p>
				<div className="list-group-detail">
					<span className="label label-success">
						<span className="label-item label-item-expand"
							>Approved</span
						>
					</span>
				</div>
			</section>
		</div>
		<div className="autofit-col">
			<div className="dropdown dropdown-action">...</div>
		</div>
	</li>
</ul>

Items

Items as Links and Buttons

List Item 1 List Item 2List Item 4

<div className="list-group">
	<a className="list-group-item list-group-item-action" href="#1"
		>List Item 1</a
	>
	<a className="list-group-item list-group-item-action" href="#1"
		>List Item 2</a
	>
	<button className="list-group-item list-group-item-action" type="button">
		List Item 3
	</button>
	<a className="list-group-item list-group-item-action" href="#1"
		>List Item 4</a
	>
</div>

Actions on Hover

Anchors

Anchors

<ul className="list-group show-quick-actions-on-hover">
	<li className="list-group-item list-group-item-flex">
		<div className="autofit-col">
			<div className="custom-control custom-checkbox">
				<label>
					<input className="custom-control-input" type="checkbox" />
					<span className="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div className="autofit-col">
			<div className="sticker sticker-secondary">
				<span className="inline-item"> ... </span>
			</div>
		</div>
		<div className="autofit-col autofit-col-expand">
			<section className="autofit-section">
				<div className="list-group-title">
					<a href="#1">Anchors</a>
				</div>
			</section>
		</div>
		<div className="autofit-col">
			<div className="quick-action-menu">
				<a
					aria-label="Delete"
					title="Delete"
					className="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					aria-label="Download"
					title="Download"
					className="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					aria-label="Expand"
					title="Expand"
					className="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
			</div>
			<div className="dropdown dropdown-action">
				<a
					aria-label="More Actions"
					title="More Actions"
					aria-expanded="false"
					aria-haspopup="true"
					className="component-action dropdown-toggle"
					data-toggle="dropdown"
					href="#1"
					id="dropdownAction1"
					role="button"
				>
					...
				</a>
				<ul
					aria-labelledby=""
					className="dropdown-menu dropdown-menu-right"
				>
					<li>
						<a className="dropdown-item" href="#1" role="button"
							>Remove</a
						>
					</li>
					<li>
						<a className="dropdown-item" href="#1" role="button"
							>Download</a
						>
					</li>
					<li>
						<a className="dropdown-item" href="#1" role="button"
							>Checkout</a
						>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>

Buttons

Account Example One
Second Level Text

<ul className="list-group show-quick-actions-on-hover">
	<li className="list-group-item list-group-item-flex">
		<div className="autofit-col">
			<div className="custom-control custom-checkbox">
				<label>
					<input className="custom-control-input" type="checkbox" />
					<span className="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div className="autofit-col">
			<div className="sticker sticker-secondary">
				<span className="inline-item"> ... </span>
			</div>
		</div>
		<div className="autofit-col autofit-col-expand">
			<section className="autofit-section">
				<div className="list-group-title">
					<span className="text-truncate-inline">
						<a className="text-truncate" href="#1"
							>Account Example One</a
						>
					</span>
				</div>
				<p className="list-group-text">
					<span className="text-truncate-inline">
						<span className="text-truncate">Second Level Text</span>
					</span>
				</p>
			</section>
		</div>
		<div className="autofit-col">
			<div className="quick-action-menu">
				<button
					aria-label="Delete"
					title="Delete"
					className="component-action quick-action-item"
					type="button"
				>
					...
				</button>
				<button
					aria-label="Download"
					title="Download"
					className="component-action quick-action-item"
					type="button"
				>
					...
				</button>
				<button
					aria-label="Expand"
					title="Expand"
					className="component-action quick-action-item"
					type="button"
				>
					...
				</button>
			</div>
			<div className="dropdown dropdown-action">
				<button
					aria-label="More Actions"
					title="More Actions"
					aria-expanded="false"
					aria-haspopup="true"
					className="component-action dropdown-toggle"
					data-toggle="dropdown"
					id="dropdownAction1"
					type="button"
				>
					...
				</button>
				<ul
					aria-labelledby=""
					className="dropdown-menu dropdown-menu-right"
				>
					<li>
						<button className="dropdown-item" type="button">
							Remove
						</button>
					</li>
					<li>
						<button className="dropdown-item" type="button">
							Download
						</button>
					</li>
					<li>
						<button className="dropdown-item" type="button">
							Checkout
						</button>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>

Active

Use the .active class on the same element that you putted .list-group-item.

Account Example One
Second Level Text

<ul className="list-group">
	<li className="list-group-item list-group-item-flex active">
		<div className="autofit-col">
			<div className="custom-control custom-checkbox">
				<label>
					<input
						checked
						className="custom-control-input"
						type="checkbox"
					/>
					<span className="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div className="autofit-col">
			<div className="sticker sticker-secondary">
				<span className="inline-item"> ... </span>
			</div>
		</div>
		<div className="autofit-col autofit-col-expand">
			<p className="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</p>
			<p className="list-group-text text-truncate">Second Level Text</p>
		</div>
		<div className="autofit-col">
			<div className="dropdown dropdown-action">...</div>
		</div>
	</li>
</ul>

Edit this page on GitHub

Table of Contents

Example
Variations
Default
Notification
Group Elements
Header
Items
Items as Links and Buttons
Actions on Hover
Anchors
Buttons
Active