Bulleted lists are used to present grouped information in a clear, scannable format. They help users quickly identify key points or related items without following a specific order. In Halstack, the bulleted list component supports customizable icon variants, and nesting levels to adapt to different content needs while maintaining consistency and readability across the interface. Use this component to enhance clarity and break down complex information into digestible chunks.
Use cases
Disclaimer — This component is not a 1-to-1 replacement of the ul ol native tags. These native tags have many different use-cases and the Bulleted List only covers one of them: listing text items within a document.
- 1.Bullet point: a small visual marker placed before each list item. It provides visual separation and helps emphasize each individual entry within the list. The default style is a filled circle.
- 2.Label: the text content associated with each bullet point. It conveys the actual information and should be clear, concise, and scannable for easy reading.
- Choose the appropriate bullet type for the context: use discs for standard lists, numbers for sequences or steps, and icons when a visual cue adds clarity or emphasis.
- Keep list items concise and scannable: lists should be easy to read at a glance. Use brief, clear phrasing.
- Maintain parallel structure: ensure that all list items follow a consistent grammatical pattern to improve readability.
- Avoid overusing nested lists: deeply nested lists can be hard to follow. Limit nesting to one level if possible.
- Use punctuation consistently: if one item ends in a period, all items should, unless they're just short phrases or single words.
- Use spacing to improve legibility: ensure there is enough vertical space between items, especially in longer lists.