Lists

Bullet options for unordered lists

Smart bullet options

Add one list class to a parent, one list class to a single ul, or one list class to one li. Add a color class to the parent, ul, or li to change only the marker color. Add any existing icon token to a parent, ul, or li to swap the icon on icon-based lists.

Full examples

These examples show parent control, ul-only control, li override, nested override, icon override, and all base list styles.

Parent class controls every child ul

One wrapper sets the default. Any child ul or li can still override it.

  • Apply for admission
  • Send transcripts
  • Review deadlines
  • Compare program paths
  • Meet with advising
  • Pick a start term

Apply the class directly to a ul

Each ul can choose its own list style with no parent wrapper.

  • Campus tour
  • Orientation session
  • Student ID setup
  • Parking permit
  • Bookstore visit
  • Tech support

Override one li inside a parent list

A single item can switch marker style or color without changing the rest.

  • First-year orientation
  • Scholarship file complete
  • Send residency form
  • Compare class formats
  • No marker on this line
  • Back to the default bullet

Nested ul override inside one list item

A nested ul can use a different style than the outer parent.

  • Enrollment steps
    • Accept admission
    • Activate student account
    • Register for classes
  • Support steps
    • Talk with advising
    • Meet with financial aid
    • Find tutoring options

Use icon tokens to override the icon

Any existing .icon--* token can replace the default icon on icon-based lists.

  • Default circle icon
  • Save orientation date
  • Find the advising office
  • Submit final forms
  • Download your checklist

Use box and none when you need less icon weight

list-box uses a left rail marker. list-none removes the marker completely.

  • Transfer credits are reviewed after admission
  • Some programs have extra portfolio or audition steps
  • Deadlines can change by term and program
  • Admissions
  • Advising
  • Financial aid

All base list styles

This is the full set of default list options in css/utilities/wg-utilities-lists.css.

list-standard

  • Native bullet
  • Color can change
  • Best for simple content

list-circle

  • Small circle icon
  • Good neutral default
  • Works with icon overrides

list-check

  • Completion step
  • Checklist style
  • Works with icon overrides

list-arrow

  • Forward action
  • Next step prompt
  • Works with icon overrides

list-dash

  • Short supporting points
  • Less visual weight
  • Works with icon overrides

list-box

  • Vertical rail marker with wrapped text
  • Strong left rail
  • Good for side content

list-none

  • No marker
  • No bullet spacing
  • Plain text list

How to use it

  • Add one .list-* class to a parent wrapper to style every child ul inside it.
  • Add one .list-* class to a ul when that list should have its own style.
  • Add one .list-* class to a single li when only that item should change.
  • Add one .li-* class to a parent, ul, or li when only the marker color should change.
  • Add one existing .icon--* class to a parent, ul, or li to swap the icon on list-circle, list-check, list-arrow, or list-dash.
  • The closest class wins, so li overrides ul, and ul overrides a parent wrapper.

List style classes

Class Use on Description
list-standard parent, ul, li Uses the native disc bullet.
list-circle parent, ul, li Uses the small circle icon marker.
list-check parent, ul, li Uses the circle check icon marker.
list-arrow parent, ul, li Uses the right arrow icon marker.
list-dash parent, ul, li Uses the dash icon marker.
list-box parent, ul, li Uses a solid left rail instead of an icon.
list-none parent, ul, li Removes the marker and left padding.

Override rules

Where you add the class What it affects Notes
<div class="list-check"> All child ul elements in that wrapper Fastest way to style a whole content block.
<ul class="list-arrow"> That ul only Overrides any parent list class.
<li class="list-box"> That li only Overrides the ul and parent list style for one item.
<ul class="li-dark-green"> Marker color for that ul Text color stays the same. Only the marker changes.
<li class="icon--calendar"> Icon marker for that li Works on icon-based lists only.

Marker color classes

Class Description
li-uvu-greenUVU green marker
li-wolverine-greenWolverine green marker
li-valley-greenValley green marker
li-meadow-greenMeadow green marker
li-seahaze-greenSeahaze green marker
li-sage-greenSage green marker
li-super-greenSuper green marker
li-dark-greenDark green marker
li-blackBlack marker
li-dark-greyDark grey marker
li-greyGrey marker
li-light-greyLight grey marker
li-warm-greyWarm grey marker
li-off-whiteOff-white marker
li-whiteWhite marker

Accessibility and browser notes

  • Use real semantic list markup with ul and li. The list utility classes only change presentation.
  • The CSS includes a spacing fix when .fs-h1 through .fs-h6 are applied directly to a li, so larger list items keep consistent rhythm.
  • Icon-based list styles have a Safari fallback because Safari can fail when icon fonts are used in ::marker.
  • list-box and list-none handle marker removal and spacing differently, and the CSS includes overrides so a single li can still switch styles inside those lists.
Dark Mode - needs work

It seems that you have reduce motion enabled!