Lists

A set of utility modifiers for standard HTML ordered <ol> , unordered <ul> and definition <dl> list types.

Ordered and unordered lists

Unstyled

<ol class="ol-none">

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

<ul class="ul-none">

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Inline lists

<ol class="ol-inline">

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

<ul class="ul-inline">

  • Item 1
  • Item 2
  • Item 3
  • Item 4

<ul class="ul-inline" style="--gap: 2rem;">

Comma list

<ul class="list-comma">

Dividers

<ul class="list-divider">

<ul class="list-divider" style="--divider: '/';">

<ul class="list-divider" style="--divider: '>';">

The divider spacing uses padding values and can also be adjusted inline:

<ul class="list-divider" style="--divider-px: 1rem;">

Definition lists

Unstyled

<dl class="dl-none">

Term 1
Description 1
Description 2
Term 2
Description 1
Description 2

Inline lists

Meta list

<dl class="dl-meta">

Title
Hello world!
Author
Joe Bloggs
Posted
6 May 2024
Updated
20 June 2024

<dl class="dl-meta" style="--dl-meta-gap: 2rem;">

Title
Hello world!
Author
Joe Bloggs
Posted
6 May 2024
Updated
20 June 2024

<dl class="dl-meta" style="--dt-colon: '';">

Title
Hello world!
Author
Joe Bloggs
Posted
6 May 2024
Updated
20 June 2024

Comma lists

<dl class="dl-comma">

Categories
Styles
Utilities
Lists
Tags
CSS
SCSS
HTML

<dl class="dl-comma-inline">

Tags
Styles
Utilities
Lists
CSS
SCSS
HTML

List groups

<ul class="list-group">

  • List item 1
  • List item 2
  • List item 3

<ol class="list-group">

  1. List item
  2. List item
  3. List item

<dl class="list-group">

Definition term
Definition description 1
Definition description 2
  1. List item link only
  2. List link with text.
  3. Link 1 and Link 2 with text.
  4. List item text only.
Term
Description link
Description link with text.
Description item only

<ul class="list-links">

<ol class="list-links">

  1. List link 1
  2. List link 2
  3. List link 3
  4. List link 4

<dl class="list-links">

List term
List item 1
List item 2
List item 3

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin anywhere below.

@use "sassmods/scss/sassmods" as *;
@include lists-css;

Using the framework

Enable the module in the sassmods-system.scss document as below.

$enable-lists: true;

Source

The source code is a self-contained Sass document that compiles the style modules as Sass mixins.

_lists.scss 
// ---------------------------------------------------------- 
// Lists
// ----------------------------------------------------------

@mixin lists-css {

// Ordered <ol> and unordered <ul>

:where(.ul-none, .ol-none, .ul-inline, .ol-inline, .list-comma, .list-divider) {
  list-style-type: "";
  padding-inline-start: 0;
}

:where(.ul-inline, .ol-inline, .list-comma, .list-divider) {
  display: flex;
  flex-wrap: wrap;
}

:where(.ul-inline, .ol-inline) {
  column-gap: var(--gap, .75rem);
}

:where(.list-comma) {
  column-gap: var(--gap, .3rem);
}

.list-comma *:not(:last-child):after {
  content: ",";
}

.list-divider *:not(:first-child) {
  padding-inline-start: var(--divider-px, .5rem);
}

.list-divider *:not(:last-child):after {
  content: var(--divider, "|");
  padding-inline-start: var(--divider-px, .5rem);
}

:where(.dl-none, .dl-meta, .dl-comma, .dl-comma-inline) dd {
  margin-inline-start: 0;
}

// Definition <dl>

.dl-meta {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: var(--dl-meta-gap, .75rem);
}

:where(.dl-comma, .dl-comma-inline) {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap, 0.3rem);
}

.dl-comma-inline dt {
  margin-inline-end: var(--dt-me, 0.15rem);
}

:where(.dl-meta, .dl-comma-inline) dt:after {
  font-weight: 400;
  content: var(--dt-colon, ":");
}

.dl-comma dt {
  inline-size: 100%;
}

:where(.dl-comma) dt:not(:first-child) {
  margin-block-start: var(--dt-mt, 0.25rem);
}

:where(.dl-comma, .dl-comma-inline) dd:not(:last-child):after {
  content: var(--content,  ",");
}

:where(.dl-comma, .dl-comma-inline) dd:not(:last-child):has(+ dt):after {
  content: "";
}

// List groups 

:where(.list-group, .list-links) {
  --list-group-hover-radius: calc(var(--list-group-radius, 0.188rem) - 1px);
  color: var(--list-group-txt, inherit);
  list-style-type: "";
  max-inline-size: var(--list-group-width);
  border: 1px solid var(--list-group-bd-color, color-mix(in srgb, CanvasText 12%, Canvas));
  border-radius: var(--list-group-radius, 0.188rem);
  background-color: var(--list-group-bg, Canvas);
}

:where(.list-group, .list-links):is(ul, ol) {
  padding-inline-start: 0;
}

:where(.list-group, .list-links) dd {
  margin-inline-start: 0;
}

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

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

:where(.list-group, .list-links) dt {
  border-block-end: 1px solid var(--list-group-bd-color, color-mix(in srgb, CanvasText 12%, Canvas));
  background-color: var(--list-group-title-bg, color-mix(in srgb, CanvasText 3%, Canvas));
}

: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) {
  text-decoration: none;
  display: block;
  padding-block: var(--list-group-py, 0.5rem);
  padding-inline: var(--list-group-px, 0.75rem);
}

:where(.list-links a:is(:hover, :focus)) {
  background-color: var(--list-group-hover, color-mix(in srgb, CanvasText 6%, Canvas));
}

: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: 0.25rem;
}

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

} // end lists-css