List Groups

Display stacked and grouped options composed flexibly using a variety of elements.

List groups are relevant for many contexts: popovers, cards, local navigation, global navigation, app panels, and any other context using a stacked list.

Figure: List Group Examples

Options

Every list group must contain one or more labeled comet-list-group__row elements to create a stacked display.

<div class="comet-list-group">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    Add to My Content
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    Add to Quicklist
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    Add to Classrooms
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    Add to Builder Tool
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						rows = [
							{
								label: "Add to My Content",
								href: "#"
							},
							{
								label: "Add to Quicklist",
								href: "#"
							},
							{
								label: "Add to Classrooms",
								href: "#"
							},
							{
								label: "Add to Builder Tool",
								href: "#"
							}
						]
					)
				}}
                
Macro params reference

Selected Row

Denote a selected row – such as an active tab or toggled option like size – using the comet-list-group__row--selected modifier class on that item.

<div class="comet-list-group">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    Large
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    Medium
                </span>
            </a>
        </li>
        <li class="comet-list-group__row comet-list-group__row--selected">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    Small
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    Very Small
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						rows = [
							{
								label: "Large",
								href: "#"
							},
							{
								label: "Medium",
								href: "#"
							},
							{
								label: "Small",
								href: "#",
								selected: true
							},
							{
								label: "Very Small",
								href: "#"
							}
						]
					)
				}}
                
Macro params reference

Actions

Display of up to two actions for every row, represented by icons and supporting an action href, using an array of row_by_row_actions.

<div class="comet-list-group">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Row 1
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Delete" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>x</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                    </a>
                </li>
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Unlocked" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>unlocked</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#unlocked"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Row 2
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Delete" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>x</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                    </a>
                </li>
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Unlocked" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>unlocked</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#unlocked"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						rows = [
							{
								label: "Row 1"
							},
							{
								label: "Row 2"
							}
						],
						row_by_row_actions = [
							{
								label: "Delete",
								icon_name: "x",
								href: "#"
							},
							{
								label: "Unlocked",
								icon_name: "unlocked",
								href: "#"
							}
						]
					)
				}}
                
Macro params reference

Row-Specific Actions

Customize row-specific actions for a single row using an actions array associated with just that row.

<div class="comet-list-group">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Row with Row-by-Row Actions
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Delete" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>x</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                    </a>
                </li>
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Unlocked" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>unlocked</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#unlocked"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Row-Specific Actions
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                </li>
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Locked" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>lock</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#lock"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						rows = [
							{
								label: "Row with Row-by-Row Actions"
							},
							{
								label: "Row-Specific Actions",
								actions: [
									{
										label: "",
										icon_name: "",
										href: ""
									},
									{
										label: "Locked",
										icon_name: "lock",
										href: "#"
									}
								]
							}
						],
						row_by_row_actions = [
							{
								label: "Delete",
								icon_name: "x",
								href: "#"
							},
							{
								label: "Unlocked",
								icon_name: "unlocked",
								href: "#"
							}
						]
					)
				}}
                
Macro params reference

Add a .comet-list-group__label element as a header for a group of rows.

<div class="comet-list-group">
    <header class="comet-list-group__header">
        <h4 class="comet-list-group__label">
            List Group Heading
        </h4>
    </header>
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    List Group Row 1 Sample Label
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    List Group Row 2 Sample Label
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    List Group Row 3 Sample Label
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						label = "List Group Heading"
					)
				}}
                
Macro params reference

Header Count

Add a .comet-list-group__label-count element to the header row to indicate the quantity of items in a group.

<div class="comet-list-group">
    <header class="comet-list-group__header">
        <h4 class="comet-list-group__label">
            Items (3)
        </h4>
    </header>
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    List Group Row 1 Sample Label
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    List Group Row 2 Sample Label
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    List Group Row 3 Sample Label
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						label = "Items",
						label_count = 3
					)
				}}
                
Macro params reference

Heading Actions

Add an array of actions at the group level, visually associated with the header .comet-list-group__label element.

<div class="comet-list-group">
    <header class="comet-list-group__header">
        <h4 class="comet-list-group__label">
            Teams
        </h4>
        <ul class="comet-list-group__actions">
            <li class="comet-list-group__action-item">
                <a href="#" alt="Settings" class="comet-list-group__action">
                    <svg class="comet-list-group__action-icon" aria-labelledby="title">
                        <title>gear</title>
                        <use xlink:href="/comet/comet_assets/comet.svg#gear"></use>
                    </svg>
                </a>
            </li>
            <li class="comet-list-group__action-item">
                <a href="#" alt="Add" class="comet-list-group__action">
                    <svg class="comet-list-group__action-icon" aria-labelledby="title">
                        <title>plus</title>
                        <use xlink:href="/comet/comet_assets/comet.svg#plus"></use>
                    </svg>
                </a>
            </li>
        </ul>
    </header>
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Red Team
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Delete" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>x</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Green Team
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Delete" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>x</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Blue Team
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Delete" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>x</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						label = "Teams",
						row_by_row_actions = [
							{
								label: "Delete",
								icon_name: "x",
								href: "#"
							}
						],
						rows = [
							{
								label: "Red Team"
							},
							{
								label: "Green Team"
							},
							{
								label: "Blue Team"
							}
						],
						actions = [
							{
								label: "Settings",
								icon_name: "gear",
								href: "#"
							},
							{
								label: "Add",
								icon_name: "plus",
								href: "#"
							}
						]
					)
				}}
                
Macro params reference

Subheadings

Divide a list group into subgroups using static group .comet-list-group__subhead-row elements.

<div class="comet-list-group">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__subhead-row">
            Previous 7 Days
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Assignment 7
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Assignment 5
                </span>
            </a>
        </li>
        <li class="comet-list-group__subhead-row">
            May
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Assignment 4
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Assignment 3
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						rows = [
							{
								label: "Previous 7 Days",
								subheader: true
							},
							{
								label: "Assignment 7"
							},
							{
								label: "Assignment 5"
							},
							{
								label: "May",
								subheader: true
							},
							{
								label: "Assignment 4"
							},
							{
								label: "Assignment 3"
							}
						]
					)
				}}
                
Macro params reference

Type Icons

Visually distinguish rows by type using a .comet-list-group__row-type-icon element that references Comet’s available system and asset iconography.

If included for one row, include for every row. Avoid including a .comet-list-group__row-type_icon for some but not all rows.

<div class="comet-list-group">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <svg class="comet-list-group__row-type-icon" aria-labelledby="title">
                    <title>document-pdf</title>
                    <use xlink:href="/comet/comet_assets/comet.svg#document-pdf"></use>
                </svg>
                <span class="comet-list-group__row-label">
                    Teachers Guide
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <svg class="comet-list-group__row-type-icon" aria-labelledby="title">
                    <title>document-pdf</title>
                    <use xlink:href="/comet/comet_assets/comet.svg#document-pdf"></use>
                </svg>
                <span class="comet-list-group__row-label">
                    Student Guide: Being Alive
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						rows = [
							{
								label: "Teachers Guide",
								type_icon: "document-pdf"
							},
							{
								label: "Student Guide: Being Alive",
								type_icon: "document-pdf"
							}
						]
					)
				}}
                
Macro params reference

Metadata

Distinguish rows using helpful .comet-list-group__metadata elements to add context, such as a row’s age or last updated date (such as “35 minutes ago”).

<div class="comet-list-group">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A first person
                </span>
                <span class="comet-list-group__row-metadata">
                    35 minutes ago
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A second person
                </span>
                <span class="comet-list-group__row-metadata">
                    2 hours ago
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A third person
                </span>
                <span class="comet-list-group__row-metadata">
                    5 weeks ago
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A fourth person
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						rows = [
							{
								label: "A first person",
								metadata: "35 minutes ago"
							},
							{
								label: "A second person",
								metadata: "2 hours ago"
							},
							{
								label: "A third person",
								metadata: "5 weeks ago"
							},
							{
								label: "A fourth person",
								metadata: ""
							}
						]
					)
				}}
                
Macro params reference

Badge

Indicate a quantity of items to attend to – such as unread messages – using a .comet-list-group__badge element.

<div class="comet-list-group">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A first person
                </span>
                <span class="comet-list-group__row-badge">
                    35
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A second person
                </span>
                <span class="comet-list-group__row-badge">
                    2
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A third person
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A fourth person
                </span>
                <span class="comet-list-group__row-badge">
                    143
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						rows = [
							{
								label: "A first person",
								badge: "35"
							},
							{
								label: "A second person",
								badge: "2"
							},
							{
								label: "A third person"
							},
							{
								label: "A fourth person",
								badge: "143"
							}
						]
					)
				}}
                
Macro params reference

Avatar

When rows represent people, use an .comet-list-group__avatar element to show an image of the person’s profile picture.

<div class="comet-list-group">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                <img src="/images/components/list-group/chris.png" alt="Chris" class="comet-list-group__avatar">
                <span class="comet-list-group__row-label">
                    Chris
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                <img src="/images/components/list-group/elizabeth.png" alt="Elizabeth" class="comet-list-group__avatar">
                <span class="comet-list-group__row-label">
                    Elizabeth
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                <span class="comet-list-group__row-label">
                    Kevin
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                <img src="/images/components/list-group/default.png" alt="Generic Default" class="comet-list-group__avatar">
                <span class="comet-list-group__row-label">
                    Generic Default
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						rows = [
							{
								href: "#href.goes.here.html",
								label: "Chris",
								avatar: "/images/components/list-group/chris.png"
							},
							{
								href: "#href.goes.here.html",
								label: "Elizabeth",
								avatar: "/images/components/list-group/elizabeth.png"
							},
							{
								href: "#href.goes.here.html",
								label: "Kevin",
								avatar: "/images/components/list-group/kevin.png"
							},
							{
								href: "#href.goes.here.html",
								label: "Generic Default",
								avatar: "/images/components/list-group/default.png"
							}
						]
					)
				}}
                
Macro params reference

Status

Signal a row’s status – such as presence – using color via the .comet-list-group__status element. The display automatically overlaps status with an .comet-list-group__avatar or .comet-list-group__type-icon element when both are shown simultaneously.

<div class="comet-list-group">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-status comet-list-group__row-status--red"></span>
                <span class="comet-list-group__row-label">
                    A first object
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-status comet-list-group__row-status--yellow"></span>
                <span class="comet-list-group__row-label">
                    A second object
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                <span class="comet-list-group__row-status comet-list-group__row-status--green"></span>
                <span class="comet-list-group__row-label">
                    Kevin
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <svg class="comet-list-group__row-type-icon" aria-labelledby="title">
                    <title>document</title>
                    <use xlink:href="/comet/comet_assets/comet.svg#document"></use>
                </svg>
                <span class="comet-list-group__row-status comet-list-group__row-status--none"></span>
                <span class="comet-list-group__row-label">
                    A type icon
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						rows = [
							{
								label: "A first object",
								status: "red"
							},
							{
								label: "A second object",
								status: "yellow"
							},
							{
								label: "Kevin",
								avatar: "/images/components/list-group/kevin.png",
								status: "green"
							},
							{
								label: "A type icon",
								type_icon: "document",
								status: "none"
							}
						]
					)
				}}
                
Macro params reference

Style Modifiers

Dark Background

The List Group component reverses color choices in regions with a dark background where a parent element includes a comet-theme--dark-background class.

The following sample rows illustrate the myriad elements displayed on a dark background:

<div class="comet-list-group comet-theme--dark-background">
    <header class="comet-list-group__header">
        <h4 class="comet-list-group__label">
            Ohhh, dark header! (14)
        </h4>
        <ul class="comet-list-group__actions">
            <li class="comet-list-group__action-item">
                <a href="#" alt="Settings" class="comet-list-group__action">
                    <svg class="comet-list-group__action-icon" aria-labelledby="title">
                        <title>gear</title>
                        <use xlink:href="/comet/comet_assets/comet.svg#gear"></use>
                    </svg>
                </a>
            </li>
            <li class="comet-list-group__action-item">
                <a href="#" alt="Add" class="comet-list-group__action">
                    <svg class="comet-list-group__action-icon" aria-labelledby="title">
                        <title>plus</title>
                        <use xlink:href="/comet/comet_assets/comet.svg#plus"></use>
                    </svg>
                </a>
            </li>
        </ul>
    </header>
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A simple option
                </span>
            </a>
        </li>
        <li class="comet-list-group__subhead-row">
            Subheading on dark
        </li>
        <li class="comet-list-group__row comet-list-group__row--selected">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    An option with an action
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="" alt="Delete" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>x</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    Badged option with metadata
                </span>
                <span class="comet-list-group__row-metadata">
                    35 minutes ago
                </span>
                <span class="comet-list-group__row-badge">
                    3
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <svg class="comet-list-group__row-type-icon" aria-labelledby="title">
                    <title>document-pdf</title>
                    <use xlink:href="/comet/comet_assets/comet.svg#document-pdf"></use>
                </svg>
                <span class="comet-list-group__row-label">
                    Student Guide
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <svg class="comet-list-group__row-type-icon" aria-labelledby="title">
                    <title>document</title>
                    <use xlink:href="/comet/comet_assets/comet.svg#document"></use>
                </svg>
                <span class="comet-list-group__row-status comet-list-group__row-status--yellow"></span>
                <span class="comet-list-group__row-label">
                    A yellow status
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="" alt="Delete" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>x</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <img src="/images/components/list-group/elizabeth.png" alt="An avatar with metadata" class="comet-list-group__avatar">
                <span class="comet-list-group__row-label">
                    An avatar with metadata
                </span>
                <span class="comet-list-group__row-metadata">
                    35min
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <img src="/images/components/list-group/default.png" alt="A avatar with red status" class="comet-list-group__avatar">
                <span class="comet-list-group__row-status comet-list-group__row-status--red"></span>
                <span class="comet-list-group__row-label">
                    A avatar with red status
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						label = "Ohhh, dark header!",
						label_count = 14,
						class = "comet-theme--dark-background",
						actions = [
							{
								label: "Settings",
								icon_name: "gear",
								href: "#"
							},
							{
								label: "Add",
								icon_name: "plus",
								href: "#"
							}
						],
						rows = [
							{
								label: "A simple option"
							},
							{
								subheader: true,
								label: "Subheading on dark"
							},
							{
								label: "An option with an action",
								actions : [
									{
										label: "Delete",
										icon_name: "x"
									}
								],
								selected: true
							},
							{
								label: "Badged option with metadata",
								metadata: "35 minutes ago",
								badge: "3"
							},
							{
								label: "Student Guide",
								type_icon: "document-pdf"
							},
							{
								label: "A yellow status",
								type_icon: "document",
								status: "yellow",
								actions: [
									{
										label: "Delete",
										icon_name: "x"
									}
								]
							},
							{
								label: "An avatar with metadata",
								avatar: "/images/components/list-group/elizabeth.png",
								metadata: "35min"
							},
							{
								label: "A avatar with red status",
								status: "red",
								avatar: "/images/components/list-group/default.png"

							}
						]
					)
				}}
                
Macro params reference

Inset

Apply the comet-list-group--row-inset-m class to the comet-list-group element to create a more spacious, comfortable display.

<div class="comet-list-group comet-list-group--row-inset-m comet-theme--dark-background">
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A standard row, inset
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Settings" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>gear</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#gear"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A first person
                </span>
                <span class="comet-list-group__row-metadata">
                    35 minutes ago
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="#" alt="Settings" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>gear</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#gear"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="">
                <span class="comet-list-group__row-label">
                    A second person
                </span>
            </a>
            <ul class="comet-list-group__actions">
                <li class="comet-list-group__action-item">
                    <a href="" alt="Delete" class="comet-list-group__action">
                        <svg class="comet-list-group__action-icon" aria-labelledby="title">
                            <title>x</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						class = "comet-list-group--row-inset-m comet-theme--dark-background",
						row_by_row_actions = [
							{
								label: "Settings",
								icon_name: "gear",
								href: "#"
							}
						],
						rows = [
							{
								label: "A standard row, inset"
							},
							{
								label: "A first person",
								metadata: "35 minutes ago"

							},
							{
								label: "A second person",
								actions : [
									{
										label: "Delete",
										icon_name: "x"
									}
								]
							}
						]
					)
				}}
                
Macro params reference

No Hairlines

Apply the comet-list-group--no-hairlines class to the comet-list-group element to remove the hairline separators from each row.

Remove hairline in instances where the list group is bound by a border or background color that distinguishes it from adjacent components. Never remove hairlines when the list is displayed in a way not separated from adjacent elements

<div class="comet-list-group comet-list-group--no-hairlines">
    <header class="comet-list-group__header">
        <h4 class="comet-list-group__label">
            Group with no hairline separators
        </h4>
    </header>
    <ul class="comet-list-group__list">
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    List Group Row 1 Sample Label
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    List Group Row 2 Sample Label
                </span>
            </a>
        </li>
        <li class="comet-list-group__row">
            <a class="comet-list-group__row-anchor" href="#">
                <span class="comet-list-group__row-label">
                    List Group Row 3 Sample Label
                </span>
            </a>
        </li>
    </ul>
</div>
                
{{
					comet.list_group(
						class = "comet-list-group--no-hairlines",
						label = "Group with no hairline separators"
					)
				}}
                
Macro params reference

Class Reference

Class Applies to Outcome

.comet-list-group__row--selected

.comet-list-group__row

Highlights row as selected

.comet-list-group__row-status--green

.comet-list-group__row-status

Produces a green / correct / present status

.comet-list-group__row-status--yellow

.comet-list-group__row-status

Produces a yellow / warning status

.comet-list-group__row-status--red

.comet-list-group__row-status

Produces a red / error / incorrect / not present status

.comet-list-group__row-status--none

.comet-list-group__row-status

Produces a gray, undefined status

.comet-list-group--no-hairlines

.comet-list-group

Removes hairline separators from each row

.comet-list-group--no-indent

.comet-list-group

Removes left indent of main content, usually for display in a stack with other components that are left aligned.

.comet-list-group--row-inset-m

.comet-list-group

Creates a more spacious display.

.comet-theme--dark-background

.comet-list-group

Reverses background, text, and fill colors for display on a dark background

Macro Reference

List Group

Parameter Values Description

actions

Array of actions (see below)

An array of actions represented by icons, aligned with the header and performed at the group-level.

class

Text

Style modifiers (see Class Reference, above) and custom classes.

label

Text

A heading for the overall list group, positioned above rows.

label_count

Text

A quantity positioned inline after label to represent the quantity of rows beneath.

row_by_row_actions

Array of actions (see below)

An array of actions represented by icons, aligned with every row of the group and performed at the row-level. Override these actions repeated across all rows by include an actions array for an individual row in rows.

rows

Array of rows (see below)

An array representing all rows displayed in the list_group.

Rows

For each group of items, include a rows array of items for each row.

rows = [
	{
		label: "Add to My Content",
		href: "#"
	},
	{
		label: "Add to Quicklist",
		href: "#"
	}
]
                
                

For each row, include the following properties:

Parameter Values Description

label

Text

The row’s label.

href

href

The link included in the row’s anchor tag. Override or extend this approach within your application for how your product handles interactions.

selected

Boolean (default: false)

Displays the row with a selected state vertical left border.

type_icon

Icon name

Displays an icon to the left of the label to reinforce the row’s type.

avatar

Image src

Displays the image referenced as an avatar to the left of the label.

status

green, yellow, red, or none

Displays a traffic-light row status.

metadata

Text

Displays small text right aligned in the row.

badge

Text

Displays a quantity in a red pill on the far right of the row.

actions

Array of actions (see below)

An array of actions represented by icons, aligned with this row and performed only for this row.

Actions

For an overall group, all rows within the group, or an individual row, include actions via the following array:

actions: [
	{
		label: "",
		icon_name: "",
		href: ""
	},
	{
		label: "Locked",
		icon_name: "lock",
		href: "#"
	}
]
                
                

For each action, include the following properties.

Parameter Values Description

label

Text

The label displayed as alternative text.

icon_name

Icon name

The icon displayed, using an option from icons.

href

href

The link included in the action’s anchor tag. Override or extend this approach within your application for how your product handles interactions.