List Groups

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.

Basic List

The default LUCI list group includes a header and text links, with predefined styles for hover, focus, selected and disabled states.

Copied to clipboard
<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 With Icons

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.

Copied to clipboard
<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>

List With Icons and Count

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.

Copied to clipboard
<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>

Nested Lists

Hierarchical lists are supported by LUCI as illustrated below. The nested list text is indented and smaller than the parent element.

Copied to clipboard
<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>

Lists With Contextual Actions

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.

Copied to clipboard
<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>

Form Lists

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.

  • Show/Hide Columns
Copied to clipboard
<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>

Colored Backgrounds

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:

List With Icons on Dark

Copied to clipboard
<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>

Form Lists on Dark

  • Show/Hide Columns
Copied to clipboard
<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 Reference

Class Applies to Outcome

.luci-list-group--contextual

.luci-list-group

Adds bottom border to heading and removes left/right padding on list items.

.luci-container--dark-blue .luci-list-group

.luci-list-group parent element.

Adds dark blue background color and applies light link color styles to text and icons.