<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Lists help organize related information in a way that is easy to scan and understand. They let users quickly read, compare, and move through content.</p>
<p>Use lists to:</p>
<ul>
<li>Present related items in a clear, structured format.</li>
<li>Break information into smaller, easy‑to‑read pieces.</li>
<li>Show steps, options, or concepts that belong together.</li>
</ul>
<p>Lists and tables serve different purposes. Choosing the right one improves usability for all users, including those with cognitive or learning disabilities or using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>List</td>
<td>Use a list to present a group of related information in a scannable, linear format.</td>
</tr>
<tr>
<td><a href="/components/table/">Table</a></td>
<td>Use a table to display structured data that users need to compare, reference, or analyze.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>Lists include a prefix and the item content.</p>
<details data-name='image-block' data-images='[{"alt":"The parts of a list, labeled 1 through 2.","caption":"1. Prefix: A bullet or number that identifies each item.\n2. List item: The text of the list item. It can be static text or a link.","url":"https://dds.dell.com/site/v3/components/list/list-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use lists to structure information so users can scan it quickly.

Choose the appropriate list type based on user expectations. For example, users do not expect an ordered list when the items are independent.

### Related Items

Use lists to group items or options that are meaningfully related.

Example: In a product’s “Ports” section, a list might include power adapter, Ethernet, and other available ports.

Lists can also present contextual [links](/components/link/), such as additional resources attached to an article.

### Process documentation

Use ordered lists to guide users through multi‑step processes. They help users follow instructions, such as completing an enrollment flow or following a “How‑to” tutorial.

### Navigation

Navigational items are often shown as a list of [links](/components/link/) to help users quickly scan and move between pages.

## Kinds

Lists cab be ordered, unordered.

* Ordered Lists: Use an ordered list when items follow a sequence or priority. Numbers show the order.
* Unordered Lists: Use an unordered list when items relate to the same topic but don’t follow a specific order. Bullets show each item.

<details data-name='image-block' data-images='[{"alt":"An image showing an ordered list with numbered styling.","caption":"Ordered list","url":"https://dds.dell.com/site/v3/components/list/list-kinds-ordered.png"},{"alt":"An image showing an unordered list","caption":"Unordered list","url":"https://dds.dell.com/site/v3/components/list/list-kinds-unordered.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Sizes

Lists come in two sizes: large and small.

* **Large** (Body1): Use for lists that appear with Display 1 headings or larger text. Provides a bigger, more readable list style.
* **Small** (Body 2, default): Use for most lists. This is the standard text size for general content.

<details data-name='image-block' data-images='[{"alt":"An image showing a large list","caption":"Large list","url":"https://dds.dell.com/site/v3/components/list/list-sizes-large.png"},{"alt":"An image showing a small list","caption":"Small list","url":"https://dds.dell.com/site/v3/components/list/list-sizes-small.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## 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.

#### **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.

#### **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

#### 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.

#### 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.

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).
| Name               | Collection | CSS var                         | Preview |
| ------------------ | ---------- | ------------------------------- | ------- |
| spacing/lg         | Semantic   | `var(--dds-spacing-lg)`         | -       |
| spacing/md         | Semantic   | `var(--dds-spacing-md)`         | -       |
| color/text/primary | Semantic   | `var(--dds-color-text-primary)` | #1D2C3B |


To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-list--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-list--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-list--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-list--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-list--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-list--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>