# Lists Lists group related items so they are easier to read and scan. ## Preview ```html title="Plain list" ``` ```tsx import { List } from '@govtech-bb/react';
  • Apply for a passport
  • Register a birth
  • Renew a driver's licence
    • ; ``` Lists are plain by default (no markers and no indent), which suits lists of links or rows, like a list of government services. Bulleted and numbered variants opt back into markers with a hanging indent. ## When to use lists Use a list to group related items, such as documents to bring, steps to follow, or links to services. The plain list works well for navigation-style lists of links; the bulleted and numbered variants suit items within body text. ## When not to use lists Do not use a list for key/value information such as a user's answers. Use a summary list instead. Do not use it for data that users need to compare across columns. Use a table instead. ## Bulleted and numbered lists Use the `--bullet` modifier for an unordered set of items, and the `--number` modifier (on an `
      `) when the order matters, such as the steps in a process. Introduce a bulleted list with a lead-in line ending in a colon. Start each item with a lowercase letter and leave off the full stop. Numbered lists need no lead-in, and each item is a full sentence ending in a full stop. ```html title="Bulleted and numbered lists"
      1. Fill in the application form
      2. Pay the fee
      3. Collect your licence from the Barbados Licensing Authority
      ``` ```tsx import { List } from '@govtech-bb/react';
    1. Proof of address
    2. National ID card
    3. Two passport photos
      4.
    4. Fill in the application form
    5. Pay the fee
    6. Collect your licence from the Barbados Licensing Authority
      7.  ```