List groups are relevant for many contexts: popovers, cards, local navigation, global navigation, app panels, and any other context using a stacked list.
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 referenceSelected 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" aria-label="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 referenceActions
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="#" title="Delete" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#x"></use>
</svg>
</a>
</li>
<li class="comet-list-group__action-item">
<a href="#" title="Unlocked" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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="#" title="Delete" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#x"></use>
</svg>
</a>
</li>
<li class="comet-list-group__action-item">
<a href="#" title="Unlocked" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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 referenceRow-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="#" title="Delete" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#x"></use>
</svg>
</a>
</li>
<li class="comet-list-group__action-item">
<a href="#" title="Unlocked" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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="#" title="Locked" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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 referenceHeader
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 referenceHeader 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 referenceHeading Actions
Add an array of actions at the group level, visually associated with the header .comet-list-group__label element.
Teams
<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="#" title="Settings" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#gear"></use>
</svg>
</a>
</li>
<li class="comet-list-group__action-item">
<a href="#" title="Add" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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="#" title="Delete" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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="#" title="Delete" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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="#" title="Delete" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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 referenceSubheadings
Divide a list group into subgroups using static group .comet-list-group__subhead-row elements.
- Previous 7 Days
- Assignment 7
- Assignment 5
- May
- Assignment 4
- Assignment 3
<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 referenceType 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-hidden="true" focusable="false">
<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-hidden="true" focusable="false">
<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 referenceMetadata
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 referenceBadge
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 referenceAvatar
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 referenceStatus
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" title="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" title="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" title="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-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#document"></use>
</svg>
<span class="comet-list-group__row-status comet-list-group__row-status--none" title="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 referenceStyle 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:
Ohhh, dark header! (14)
<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="#" title="Settings" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#gear"></use>
</svg>
</a>
</li>
<li class="comet-list-group__action-item">
<a href="#" title="Add" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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" aria-label="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="" title="Delete" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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-hidden="true" focusable="false">
<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-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#document"></use>
</svg>
<span class="comet-list-group__row-status comet-list-group__row-status--yellow" title="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="" title="Delete" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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" title="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 referenceInset
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="#" title="Settings" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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="#" title="Settings" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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="" title="Delete" class="comet-list-group__action">
<svg class="comet-list-group__action-icon" aria-hidden="true" focusable="false">
<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 referenceNo 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
Group with no hairline separators
<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 referenceClass Reference
| Class | Applies to | Outcome |
|---|---|---|
|
|
.comet-list-group__row |
Highlights row as selected |
|
|
.comet-list-group__row-status |
Produces a green / correct / present status |
|
|
.comet-list-group__row-status |
Produces a yellow / warning status |
|
|
.comet-list-group__row-status |
Produces a red / error / incorrect / not present status |
|
|
.comet-list-group__row-status |
Produces a gray, undefined status |
|
|
.comet-list-group |
Removes hairline separators from each row |
|
|
.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 |
Creates a more spacious display. |
|
|
.comet-list-group |
Reverses background, text, and fill colors for display on a dark background |
Macro Reference
List Group
| Parameter | Values | Description |
|---|---|---|
|
|
Array of actions (see below) |
An array of actions represented by icons, aligned with the header and performed at the group-level. |
|
|
Text |
Style modifiers (see Class Reference, above) and custom classes. |
|
|
Text |
A heading for the overall list group, positioned above rows. |
|
|
Text |
A quantity positioned inline after |
|
|
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 |
|
|
Array of rows (see below) |
An array representing all rows displayed in the |
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 |
|---|---|---|
|
|
Text |
The row’s label. |
|
|
href |
The link included in the row’s anchor tag. Override or extend this approach within your application for how your product handles interactions. |
|
|
Boolean (default: |
Displays the row with a selected state vertical left border. |
|
|
Icon name |
Displays an icon to the left of the label to reinforce the row’s type. |
|
|
Image src |
Displays the image referenced as an avatar to the left of the label. |
|
|
|
Displays a traffic-light row status. |
|
|
Text |
Displays small text right aligned in the row. |
|
|
Text |
Displays a quantity in a red pill on the far right of the row. |
|
|
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 |
|---|---|---|
|
|
Text |
The label displayed as alternative text. |
|
|
Icon name |
The icon displayed, using an option from icons. |
|
|
href |
The link included in the action’s anchor tag. Override or extend this approach within your application for how your product handles interactions. |