UI Pattern and Guidelines
  • User interface pattern guidelines
  • Foundations
    • Accessibility
    • States
    • Colours
    • Typography
    • Grid and layout
    • Icons
    • Data Visualisation
  • Components
    • Avatar
    • Badge
    • Breadcrumb
    • Button group / Select button
    • Button
    • Card
    • Checkbox
    • Contained button
    • Container
    • Counter
    • Divider
    • Empty state
    • Error page
    • Form Fields
    • Footer
    • Icons
    • Legal
    • Link
    • Lists
    • Loader
    • Modal
    • Navigation
    • Notification
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Scroll bar
    • Slider
    • Status
    • Switch
    • Table
    • Tabs
    • Tag
    • Titles
    • Tooltip
    • Uploader
Powered by GitBook
On this page
  • Usage
  • Best Practices
  • Examples
  • Sizing and Styles

Was this helpful?

  1. Components

Lists

PreviousLinkNextLoader

Last updated 4 years ago

Was this helpful?

Usage

Lists display a set of related text-only content. Each list item begins with a bullet or a number.

Best Practices

  • Break up chunks of related content to make the information easier for users to scan

  • Not be used for lists where the entire item represents an action

  • Start with a capital letter

  • Not use commas or semicolons at the end of each line

Examples

Sizing and Styles

Parent

  • Icon: Blue base

  • Left padding: 8px

  • Font: Open Sans Regular 16px

  • Font colour: Blue base

  • Radio and Checkbox - usual state applies

Child

  • Icon: Grey base

  • Left padding: 8px

  • Font: Open Sans Regular 16px

  • Font colour: Grey base

  • Radio and Checkbox - usual state applies