Lists

Bullet options for UL lists



Lists — Reference

Apply a list class to any parent or directly to a ul. Nearest parent wins automatically.

.list-standard (native bullets)

  • Admissions requirements overview
  • Program highlights and outcomes
  • Important dates and deadlines

.list-box (green accent bar, gutter-based)

  • Action Phrase: A governed verb phrase that defines intent.
  • Target Object: The specific item/destination being acted on.
  • Object Qualifier: Optional metadata in parentheses (PDF), (Fall 2026).

.list-dash (subtle dash)

  • Use clear, descriptive link text
  • Avoid vague terms like “More”
  • Prefer program/department names

.list-check (decorative check)

  • Completed: Submit transcripts
  • Next: Schedule orientation
  • Optional: Apply for scholarships

.list-none (no markers)

  • Office: Education Building, Room 210
  • Phone: (801) 000-0000
  • Email: department@uvu.edu

Callout example (parent applied)

  • Markers sit in a gutter and never touch text
  • Works on multi-line list items cleanly
  • Only activates where you opt-in

Override example

  • This UL overrides the parent .list-box
  • Because the class is applied directly to the UL

Class - Use case

Class Use case Marker type
.list-standard Default content lists Native bullets
.list-circle Explicit “standard list” intent Native bullets
.list-box Definition-style / emphasis lists Decorative bar (gutter)
.list-dash Subtle lists in dense layouts Decorative dash (gutter)
.list-check Progress/status with text labels Decorative icon (gutter)
.list-none Metadata/contact blocks None


Accessibility notes (WCAG)

  • Preserves native list semantics (ul/li).
  • Markers are decorative; meaning must be in text (not shape/color alone).
  • Marker color uses --color-uvu-green but does not carry meaning by itself.
Dark Mode - needs work

It seems that you have reduce motion enabled!