<h2>When to use</h2>
<p>List and table are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>List</td>
<td>A list presents a group of related information in a scannable format.</td>
</tr>
<tr>
<td><a href="/components/table/">Table</a></td>
<td>A table displays complex groups of information for the purpose of reference, comparison, or choice.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The parts of a list, labeled 1 through 2.","caption":"1. Prefix: either a bullet or a number.\n2. List item: static text or links.","url":"https://dds.dell.com/site/stage/7a/c9/List_Anatomy_bc6333309f.png"}]' data-numberofcolumns='1'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/presenting-bulleted-lists/","type":"External"},"title":"Bulleted lists article","description":"Read the Nielsen Norman Group&#39;s article on lists in digital content.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Usage is very often correlated with list kinds. Ensure the kind matches the user’s expectations of the experience to avoid confusion. Users would not expect to see an ordered list for a group of discrete items.

### Related Items

List can be used to show semantically related items or options. For example, a “Ports” header under a product’s technical specifications section, listing USB, power adapter, ethernet, and other included ports. List items may also be [links](/components/link/), such as a list of resources attached to an article for further reading.

### Process documentation

Complex processes may be hard for a user to digest and thus require a list of steps. This could include the actions that must be taken to enroll in a program, or an escalation of steps to take to correct a problem.

### Navigation

Navigational items are often shown as a list of [links](/components/link/) to allow users to easily scan an overview of available pages.

## Kinds

Lists are available with or without a prefix.

<details data-name='image-block' data-images='[{"alt":"An image showing an ordered list with numbered styling.","caption":"**Ordered:** An ordered list contains items that are sequential or in order of priority, such as steps in a process. List items are marked by a number.","url":"https://dds.dell.com/site/stage/97/d7/List_Kinds_Ordered_28979a3433.png"},{"alt":"An image showing an unordered list","caption":"**Unordered**: An unordered list contains related items that don’t rely on a sequential order. List items are preceded by a bullet point.","url":"https://dds.dell.com/site/stage/b7/1a/List_Kinds_Unordered_e77d7bada3.png"},{"alt":"An image showing an unstyled list with no bullet point or number styling.","caption":"**Unstyled**: An unstyled list is an unordered list without bullet point styling, such as sidebar navigation. Unstyled lists still have left-padding, so list items will appear indented.","url":"https://dds.dell.com/site/stage/71/5f/List_Kinds_Unstyled_d4733ebddf.png"}]' data-numberofcolumns='3'></details>

### Options

In the [Figma UI kit](https://www.figma.com/file/tEHQtV6HKUB1VFNs0hyQaL/Components-%26-Patterns-for-Web---Light-Mode?type=design&node-id=69646-129945&t=hjpSlsNudubUmDxc-0), list is available with two text styles: body 1 and body 2. You can read more about the font ramp on the [typography](/foundations/typography/) foundations page.

<details data-name='image-block' data-images='[{"alt":"An image showing a list in body 1 font size.","caption":"","url":"https://dds.dell.com/site/stage/f4/79/List_Options_Body_1_cb120e5dd9.png"},{"alt":"An image showing a list in body 2 font size.","caption":"","url":"https://dds.dell.com/site/stage/1c/c0/List_Options_Body_2_2b70442b1a.png"}]' data-numberofcolumns='2'></details>

| Text Style       | Use case                                                                                                                                                                                 |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Body 1           | Larger list text that pairs with Display 1 titles and larger body text. Read more about use cases in the [font ramp](/foundations/typography/#font-ramp) section of the typography page. |
| Body 2 (default) | The default text style for list text.                                                                                                                                                    |

## Standards

### Accessibility

**Vertically-stacked (listed) links should have a line height of 24 pixels or greater**

This guideline creates a minimum distance between touch targets for anyone who experiences difficulties with fine motor control. The simplest and easiest way to meet this guideline is to apply the default body style (16 pixels with a line height of 24 pixels) or larger to your stacked links.

If the links are the small variant (12 pixels) or have a custom type style applied, ensure they have a minimum 24 pixel line-height. While inline links are exempt from this requirement, styling them with 16 pixel default body or greater is still recommended.\
WCAG 2.2: [2.5.8 Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)

### Content

**Formatting**\
Keep formatting consistent. Whether list items are written as sentences or fragments, keep all items in the same format.\
**Do:**\
Things to do on vacation:\
Take a walk on the beach.\
Explore a historic town.\
Sleep in until noon.\
**Don’t:**\
Things to do on vacation:\
take a walk on the beach\
explore a historic town\
Sleep in until noon.<br><br/>


**Repetition**\
Avoid repeating the first word in each list item.\
**Do:**\
Reasons to take a break:\
Take a shower.\
Go for a walk.\
Enjoy a short nap.\
**Don’t:**\
Reasons to take a break:\
Take a shower.\
Take a walk.\
Take a nap.<br><br/>


**List item order**\
Only use ordered lists when the order of items is important.\
**Do:**\
Product return process:\
Place items in original packaging\
Contact Customer Returns\
Add RMA to shipping label\
Drop off at UPS or FedEx location\
**Don’t:**\
How to contact Customer Support:\
Email\
Phone\
By mail\
In person<br><br/>


**Capitalization**\
Begin each list item with a capital letter if it is a complete sentence. If the list item is a fragment, it may be sentence case following a colon in the sentence preceding the list.<br><br/>

**Punctuation**\
If list items are complete sentences, they should end with a period or the appropriate punctuation. If the list item is a fragment, punctuation is not required.<br><br/>

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-list--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-list--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-list--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-list--basic&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-list--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-list--docs&viewMode=docs&websiteFrame=true'></details>