List groups are flexible, vertical lists of interactive elements with consistent spacing, structure and style.
List groups can be constructed with simple text links or a combination of text, icons and form elements as illustrated below. List groups can exist directly on a page, however, they are often used within other components such as menus and (LUCI pending) navigation panels.
The default LUCI list group includes a header and text links, with predefined styles for hover, focus, selected and disabled states.
<ul class="luci-list-group">
<li class="luci-list-group__item luci-list-group__item--heading"> List Heading </li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 1 Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--hover"> List item 2 Link Hover </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--focus"> List item 3 Link Focus </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--selected"> List item 4 Link Selected </a>
</li>
<li class="luci-list-group__item">
<span class="luci-list-group__element luci-list-group__element--disabled"> List item 5 Disabled </span>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 6 Link with a long label. </a>
</li>
</ul>List groups can include representative icons when necessary (most often used in site or product navigation). These are not distinct targets but instead complement the meaning of the label. See LUCI icons to review available icons and proper application.
<ul class="luci-list-group">
<li class="luci-list-group__item luci-list-group__item--heading"> List Heading </li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 1 Link </span>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--hover luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 2 Link Hover </span>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--focus luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 3 Link Focus </span>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--selected luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 4 Link Selected </span>
</a>
</li>
<li class="luci-list-group__item">
<span class="luci-list-group__element luci-list-group__element--disabled luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 5 Disabled </span>
</span>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 6 Link with a long label. </span>
</a>
</li>
</ul>Lists can include a "count" of items associated with a text link using a badge component. These badges can also be used in basic lists.
<ul class="luci-list-group">
<li class="luci-list-group__item luci-list-group__item--heading"> List Heading </li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 1 Link </span>
<span class="luci-list-group__cell">
<span class="luci-badge"> 10 </span>
</span>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--hover luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 2 Link Hover </span>
<span class="luci-list-group__cell">
<span class="luci-badge luci-badge--warning"> 3 </span>
</span>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--focus luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 3 Link Focus </span>
<span class="luci-list-group__cell">
<span class="luci-badge luci-badge--error"> 15 </span>
</span>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--selected luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 4 Link Selected </span>
<span class="luci-list-group__cell">
<span class="luci-badge luci-badge--error"> 999+ </span>
</span>
</a>
</li>
<li class="luci-list-group__item">
<span class="luci-list-group__element luci-list-group__element--disabled luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 5 Disabled </span>
<span class="luci-list-group__cell">
<span class="luci-badge"> 25 </span>
</span>
</span>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 6 Link with a long label. </span>
<span class="luci-list-group__cell">
<span class="luci-badge luci-badge--warning"> 1 </span>
</span>
</a>
</li>
</ul>Hierarchical lists are supported by LUCI as illustrated below. The nested list text is indented and smaller than the parent element.
<ul class="luci-list-group">
<li class="luci-list-group__item luci-list-group__item--heading"> List Heading </li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 1 Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 2 Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 3 Link </a>
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> Nested List item 1 </a>
</li>
<li class="luci-list-group__item">
<span class="luci-list-group__element"> Nested List item 2 </span>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--hover"> List item 3 Link Hover </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--focus"> List item 4 Link Focus </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--selected"> Nested List item 5 Selected </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> Nested List item 6 with a long label. </a>
</li>
</ul>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 4 Link </a>
</li>
<li class="luci-list-group__item">
<span class="luci-list-group__element luci-list-group__element--disabled"> List item 5 Disabled </span>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 6 Link with a long label. </a>
</li>
</ul>List groups can include multiple actions within a single row. This provides a shortcut to common actions users can take with lists such as edit and delete.
<ul class="luci-list-group luci-list-group--contextual">
<li class="luci-list-group__item luci-list-group__item--heading"> List Heading </li>
<li class="luci-list-group__item">
<span class="luci-list-group__contextual-row">
<span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 1 Link </a>
</span>
<span class="luci-list-group__contextual-cell">
<button class="luci-list-group__element luci-list-group__element--link">
<svg class="luci-icon luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#edit">
</use>
</svg>
</button>
</span>
<span class="luci-list-group__contextual-cell">
<button class="luci-list-group__element luci-list-group__element--link">
<svg class="luci-icon luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete">
</use>
</svg>
</button>
</span>
</span>
</li>
<li class="luci-list-group__item">
<span class="luci-list-group__contextual-row">
<span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--hover"> List item 2 Link Hover </a>
</span>
<span class="luci-list-group__contextual-cell">
<button class="luci-list-group__element luci-list-group__element--link luci-list-group__element--hover">
<svg class="luci-icon luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#edit">
</use>
</svg>
</button>
</span>
<span class="luci-list-group__contextual-cell">
<button class="luci-list-group__element luci-list-group__element--link luci-list-group__element--hover">
<svg class="luci-icon luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete">
</use>
</svg>
</button>
</span>
</span>
</li>
<li class="luci-list-group__item">
<span class="luci-list-group__contextual-row">
<span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--focus"> List item 3 Link Focus </a>
</span>
<span class="luci-list-group__contextual-cell">
<button class="luci-list-group__element luci-list-group__element--link luci-list-group__element--focus">
<svg class="luci-icon luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#edit">
</use>
</svg>
</button>
</span>
<span class="luci-list-group__contextual-cell">
<button class="luci-list-group__element luci-list-group__element--link luci-list-group__element--focus">
<svg class="luci-icon luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete">
</use>
</svg>
</button>
</span>
</span>
</li>
<li class="luci-list-group__item">
<span class="luci-list-group__contextual-row">
<span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
<span class="luci-list-group__element luci-list-group__element--disabled"> List item 4 Disabled </span>
</span>
<span class="luci-list-group__contextual-cell">
<span class="luci-list-group__element luci-list-group__element--disabled">
<svg class="luci-icon luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#edit">
</use>
</svg>
</span>
</span>
<span class="luci-list-group__contextual-cell">
<span class="luci-list-group__element luci-list-group__element--disabled">
<svg class="luci-icon luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete">
</use>
</svg>
</span>
</span>
</span>
</li>
<li class="luci-list-group__item">
<span class="luci-list-group__contextual-row">
<span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 5 Link with a long label. </a>
</span>
<span class="luci-list-group__contextual-cell">
<button class="luci-list-group__element luci-list-group__element--link">
<svg class="luci-icon luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#edit">
</use>
</svg>
</button>
</span>
<span class="luci-list-group__contextual-cell">
<button class="luci-list-group__element luci-list-group__element--link">
<svg class="luci-icon luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete">
</use>
</svg>
</button>
</span>
</span>
</li>
</ul>List groups can include form elements such as checkboxes and accompanying submit buttons. For example, this list group is used in the Show/Hide Column menu of LUCI data tables.
<ul class="luci-list-group">
<li class="luci-list-group__item luci-list-group__item--heading"> Show/Hide Columns </li>
<li class="luci-list-group__item">
<form class="luci-form" action="#" method="post">
<div class="luci-form__field-group">
<span class="luci-form__checkbox">
<label for="checkbox551" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox551" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Serial Number</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox35264" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox35264" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Cluster Serial Number</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox88035" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox88035" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Cluster Name</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox93987" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox93987" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Remote Cluster Serial Number with long text</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox25861" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox25861" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Product Family</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox79717" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox79717" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Product Location</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox41146" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox41146" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Group</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox51681" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox51681" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Product Number</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox66504" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox66504" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Contract Status</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox27812" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox27812" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">OS Version</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox52530" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox52530" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">System name</span>
</label>
</span>
</div>
</form>
</li>
</ul>List groups adapt based on the background color being used in higher-order component containers such as menus and (LUCI pending) navigation panels. Here are a few examples to reveal how they are affected by darker backgrounds:
<div class="luci-container--dark">
<ul class="luci-list-group">
<li class="luci-list-group__item luci-list-group__item--heading"> List Heading </li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 1 Link </span>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--hover luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 2 Link Hover </span>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--focus luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 3 Link Focus </span>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--selected luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 4 Link Selected </span>
</a>
</li>
<li class="luci-list-group__item">
<span class="luci-list-group__element luci-list-group__element--disabled luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 5 Disabled </span>
</span>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
<span class="luci-list-group__cell">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#reports">
</use>
</svg>
</span>
<span class="luci-list-group__cell luci-list-group__cell--text"> List item 6 Link with a long label. </span>
</a>
</li>
</ul>
</div><div class="luci-container--dark">
<ul class="luci-list-group">
<li class="luci-list-group__item luci-list-group__item--heading"> Show/Hide Columns </li>
<li class="luci-list-group__item">
<form class="luci-form" action="#" method="post">
<div class="luci-form__field-group">
<span class="luci-form__checkbox">
<label for="checkbox38279" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox38279" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Serial Number</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox79283" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox79283" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Cluster Serial Number</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox83566" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox83566" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Cluster Name</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox30441" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox30441" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Remote Cluster Serial Number with long text</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox24688" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox24688" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Product Family</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox10499" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox10499" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Product Location</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox60860" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox60860" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Group</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox48772" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox48772" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Product Number</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox19047" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox19047" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Contract Status</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox51434" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox51434" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">OS Version</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox88282" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox88282" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">System name</span>
</label>
</span>
</div>
</form>
</li>
</ul>
</div>| Class | Applies to | Outcome |
|---|---|---|
|
|
|
Adds bottom border to heading and removes left/right padding on list items. |
|
|
|
Adds dark blue background color and applies light link color styles to text and icons. |