List groups

A basic set of list utilities for creating standalone list group components using standard HTML list types. Disabled by default, enable with $enable-list-groups: true; in the configuration.scss document.

List groups (anchor)

List groups are created by including the class utility .list-group with standard ul, ol and dl list types.

<ul class="list-group">

List item 1
List item 2
List item 3

<ol class="list-group">

List item
List item
List item

<dl class="list-group">

Definition term: Definition description 1; Definition description 2

Any links within each list type group inherits the default link properties included with the typography styles.

Item link only
Item link with text.
Link 1 and Link 2 with text.
List item text only.

List item link only
List link with text.
Link 1 and Link 2 with text.
List item text only.

Term: Description link; Description link with text.; Description item only

List links (anchor)

List link groups turn the links within the list into block elements with hover and focus styles. These are created by including the class utility .list-links with standard ul, ol and dl lists with a single link in each list item.

<ul class="list-links">

<ol class="list-links">

<dl class="list-links">

List term: List item 1; List item 2; List item 3

Colors (anchor)

Color-schemes (anchor)

Variable list group colors using the color-schemes surface colors.

List groups (anchor)

[class="list-group list-surf-1"]

List item 1
List item 2
List item 3
List item 4

List item 1
List item 2
List item 3
List item 4

List term: List item 1; List item 2; List item 3

List term: List item 1; List item 2; List item 3

List links (anchor)

[class="list-links list-surf-1"]

List term: List item 1; List item 2; List item 3

Theme colors (anchor)

With $enable-theme-colors: true;

List groups (anchor)

[class="list-group list-light"]

List item 1
List item 2
List item 3
List item 4

Item 1
Item 2
Item 3
Item 4

List term: List item 1; List item 2; List item 3

[class="list-group list-dark"]

List item 1
List item 2
List item 3
List item 4

Item 1
Item 2
Item 3
Item 4

List term: List item 1; List item 2; List item 3

List links (anchor)

[class="list-links list-light"]

List term: List item 1; List item 2; List item 3

[class="list-links list-dark"]

List term: List item 1; List item 2; List item 3

Primary colors (anchor)

With $enable-primary-colors: true; in the configuration.scss document.

List groups (anchor)

[class="list-group list-blue"]

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

List term: List item 1; List item 2; List item 3

[class="list-group list-red"]

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

List term: List item 1; List item 2; List item 3

[class="list-group list-green"]

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

List term: List item 1; List item 2; List item 3

[class="list-group list-orange"]

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

List term: List item 1; List item 2; List item 3

[class="list-group list-cyan"]

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

List term: List item 1; List item 2; List item 3

List links (anchor)

[class="list-links list-blue"]

List term: List item 1; List item 2; List item 3

[class="list-links list-red"]

List term: List item 1; List item 2; List item 3

[class="list-links list-green"]

List term: List item 1; List item 2; List item 3

[class="list-links list-orange"]

List term: List item 1; List item 2; List item 3

[class="list-links list-cyan"]

List term: List item 1; List item 2; List item 3

Icons (anchor)

If the icons are enabled any icons used within the list groups and list links utilities will inherit the color of text or link.

List item 1
List item 2
List item 3

Customize (anchor)

The default list group property values can be customized in the properties.scss document. The styles can be customized in the _list_groups.scss document in the [styles/components] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Properties

$list-group-txt:            var(--text) !default;
$list-group-links:          var(--link) !default;
$list-group-py:             0.5rem !default;
$list-group-px:             0.75rem !default;
$list-group-bg:             var(--body-bg) !default;
$list-group-title-bg:       var(--surf-2) !default;
$list-group-hover:          var(--surf-1) !default;
$list-group-bd-color:       var(--surf-3) !default;
$list-group-radius:         0.188rem !default;
$list-group-hover-radius:   calc(var(--list-group-radius) - 1px) !default;

Styles

// ---------------------------------------------------------- 
// List groups
// ----------------------------------------------------------
@use "../../configuration" as *;

@if $enable-list-groups {

:where(.list-group, .list-links) {
  @if $enable-icon-mixins or $enable-icon-styles {
    --ico: var(--list-group-txt);
  }
  --pl: 0;
  --dd-ml: 0;
  color: var(--list-group-txt);
  list-style-type: "";
  max-inline-size: var(--list-group-width);
  border: 1px solid var(--list-group-bd-color);
  border-radius: var(--list-group-radius);
  background-color: var(--list-group-bg);
}

:where(.list-group, .list-links) :is(li, dd):not(:last-child) {
  border-block-end: 1px solid var(--list-group-bd-color);
}

:where(.list-group :is(li, dt, dd), .list-links dt) {
  padding-block: var(--list-group-py);
  padding-inline: var(--list-group-px);
}

:where(.list-group, .list-links) dt {
  border-block-end: 1px solid var(--list-group-bd-color);
  background-color: var(--list-group-title-bg);
}

:where(.list-group, .list-links) dt:first-child {
  border-radius: var(--list-group-hover-radius) var(--list-group-hover-radius) 0 0;
}

// List links
:where(.list-links a) {
  @if $enable-icon-mixins or $enable-icon-styles {
    --ico: var(--list-group-links);
  }
  --color: var(--list-group-links);
  --visited: var(--list-group-links);
  --hover: var(--list-group-links);
  text-decoration: none;
  display: block;
  padding-block: var(--list-group-py);
  padding-inline: var(--list-group-px);
}

:where(.list-links a:is(:hover, :focus)) {
  background-color: var(--list-group-hover);
}

:where(.list-links a:focus-visible) {
  outline: none;
}

:where(.list-links *:first-child a:is(:hover, :focus)) {
  border-radius: var(--list-group-hover-radius) var(--list-group-hover-radius) 0 0;
}

:where(.list-links *:last-child a:is(:hover, :focus)) {
  border-radius: 0 0 var(--list-group-hover-radius) var(--list-group-hover-radius);
}

:where(.list-group, .list-links) [aria-current="page"] {
  font-weight: bold;
}

// Ordered lists, inserts counter-increment to replace list-style-type.
:where(.list-group, .list-links) ol {
  counter-reset: ol-list;
}

:where(.list-group, .list-links):is(ol) li {
  counter-increment: ol-list;
}

:where(.list-group):is(ol) li:before {
  content: counter(ol-list) ". "; 
  margin-inline-end: .25rem;
}

:where(.list-links):is(ol) li a:before {
  content: counter(ol-list) ". "; 
  margin-inline-end: .25rem;
}

// Colors
.list-surf-1 {
  --list-group-txt: var(--text);
  --list-group-links: var(--link);
  --list-group-bg: var(--surf-1);
  --list-group-title-bg: var(--surf-2);
  --list-group-bd-color: var(--surf-3);
  --list-group-hover: var(--surf-2);
}

.list-light {
  --list-group-txt: #000;
  --list-group-links: #000;
  --list-group-bg: var(--surf-1-light);
  --list-group-title-bg: var(--surf-3-light);
  --list-group-bd-color: var(--surf-3-light);
  --list-group-hover: var(--surf-2-light);
}

.list-dark {
  --list-group-txt: #fff;
  --list-group-links: #fff;
  --list-group-bg: var(--surf-1-dark);
  --list-group-title-bg: var(--surf-3-dark);
  --list-group-bd-color: var(--surf-3-dark);
  --list-group-hover: var(--surf-2-dark);
}

@if $enable-primary-colors {

.list-blue {
  --list-group-txt: #fff;
  --list-group-links: #fff;
  --list-group-bg: var(--blue);
  --list-group-title-bg: var(--blue);
  --list-group-bd-color: var(--blue-light);
  --list-group-hover: var(--blue-dark);
}

.list-red {
  --list-group-txt: #fff;
  --list-group-links: #fff;
  --list-group-bg: var(--red);
  --list-group-title-bg: var(--red);
  --list-group-bd-color: var(--red-light);
  --list-group-hover: var(--red-dark);
}

.list-green {
  --list-group-txt: #fff;
  --list-group-links: #fff;
  --list-group-bg: var(--green);
  --list-group-title-bg: var(--green);
  --list-group-bd-color: var(--green-light);
  --list-group-hover: var(--green-dark);
}

.list-orange {
  --list-group-txt: #000;
  --list-group-links: #000;
  --list-group-bg: var(--orange);
  --list-group-title-bg: var(--orange);
  --list-group-bd-color: var(--orange-dark);
  --list-group-hover: var(--orange-light);
}

.list-cyan {
  --list-group-txt: #000;
  --list-group-links: #000;
  --list-group-bg: var(--cyan);
  --list-group-title-bg: var(--cyan);
  --list-group-bd-color: var(--cyan-dark);
  --list-group-hover: var(--cyan-dark);
}

} // End primary-colors

} // End list-groups