# List Item

## Anatomy

- **Title:** The primary content of the list item, providing a brief description or label. Titles can have various font weights including regular, semibold, or bold.
- **Subtitle:** Additional information accompanying the title (optional).
- **Expanded Content:** Additional content that can be toggled or expanded upon user interaction, such as text paragraphs.
- **Leading Element:** An optional element positioned at the beginning of the list item, which can include radio buttons, checkboxes, icons, or images.
- **Trailing Element:** An optional element positioned at the end of the list item, providing supplementary information or actions. This can include meta text, toggle switches, toggle buttons, or icons.

## Variants

| Variant    | Description                                                                                     |
| ----------| ----------------------------------------------------------------------------------------------- |
| Standard  | Standard list items are basic and versatile, suitable for displaying simple text-based content. |
| Accordion | Accordion list items allow for collapsible sections, enabling users to expand or collapse additional content. |
| Byline    | Byline list items are used to present the contributing journalist in a text.                     |
| Image     | Image list items feature visual imagery, ideal for showcasing images or thumbnails.             |
| Switch    | Switch list items incorporate toggle switches as trailing elements, allowing users to toggle a setting or option. |
| Radio     | Radio list items utilize radio buttons as leading elements, enabling users to select a single option from a list. |
| Checkbox  | Checkbox list items feature checkboxes as leading elements, allowing users to select multiple options from a list. |
| Toggle    | Toggle list items include toggle buttons as trailing elements, providing users with on/off functionality for specific actions or settings. |

## Usage

Proper utilization of list item variants ensures clarity and consistency throughout the user interface. Here are some guidelines to follow:

### Dos

- **Provide Clear and Concise Titles:** Ensure list item titles are descriptive and short so they are easy to scan.
- **Use Leading and Trailing Elements Purposefully:** Incorporate leading and trailing elements wisely to enhance usability and convey additional information or actions.
- **Order list items in logical ways:** Arrange items alphabetically, numerically, or by function to facilitate user understanding.

### Don'ts

- **Overcomplicate List Items:** Avoid overloading list items with excessive content or functionality, which can lead to cluttered interfaces and confusion.