Skip to content
Amplify from Studio 24
  • Get started
  • Fundamentals
  • Layout helpers
  • Core components
  • Advanced components
  • Design handover & standards
  • Colours
  • Typography
  • Buttons and links
  • Lists
  • Icons
  • Breakpoints
  • Vertical spacing
  • Hide and show items inclusively
  • Skip link
  • Images
  • Forms
  • Form error messages
  • Tables
  • Blockquotes
  • Details and summary
  • Utility classes
  • Flow elements
  • Print styles

Lists

Use lists to make blocks of text easier to read, and to break information into manageable chunks.

Unordered lists

  • Level 1 list item 1
  • Level 1 list item 2
  • Level 1 list item 3
    • Level 2 list item 1
    • Level 2 list item 2
    • Level 2 list item 3
  • Level 1 list item 4
  • Level 1 list item 5
  • Level 1 list item 6

Ordered lists

  1. Level 1 list item 1
  2. Level 1 list item 2
  3. Level 1 list item 3
    1. Level 2 list item 1
    2. Level 2 list item 2
    3. Level 2 list item 3
  4. Level 1 list item 4
  5. Level 1 list item 5
  6. Level 1 list item 6

Clean list

  • Level 1 list item 1
  • Level 1 list item 2
  • Level 1 list item 3
  • Level 1 list item 4
  • Level 1 list item 5
  • Level 1 list item 6

Considerations

As noted by Scott O'Hara, the CSS used for the clean-list class to remove the markers also removes the list semantics in Webkit browsers. If the list semantics are important for your users, add role="list" to restore them.

Description lists - default styling

Term
Description
Term
Description
Term
Description
Term
Description

For a more tabulated style, add the grid class to the dl element:

Description lists - grid styling

Term
Description
Term
Description
Term
Description
Term
Description
© Studio 24