List

Overview

Lists help organize content into a clear, scannable vertical structure. There are two variants: default (daff-list) for generic content and navigation (daff-nav-list) for groups of links.

<daff-list role="list">
  <daff-list-item>Free shipping on orders over $50</daff-list-item>
  <daff-list-item>30-day free returns</daff-list-item>
  <daff-list-item>Secure checkout</daff-list-item>
</daff-list>

Best practices

When to use

• Grouping related items that share a common theme or category
• Displaying a series of links for navigation menus

Usage

Import the list style(s) you need into your component:

Available imports:

• Default lists: DAFF_LIST_COMPONENTS
• Navigation lists: DAFF_NAV_LIST_COMPONENTS

import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_LIST_COMPONENTS,
  ],
})
export class CustomComponent {}

Deprecation notice:

DaffListModule is deprecated. Use the standalone component imports instead.

Anatomy

A list is composed of a container and one or more items:

<daff-list>
  <daff-list-item>Content item</daff-list-item>
  <daff-list-item>Content item</daff-list-item>
  <daff-list-item>Content item</daff-list-item>
</daff-list>

• <daff-list> or <daff-nav-list>: The wrapper component that holds all list items.
• <daff-list-item>: An individual item within the list. Use the [daff-list-item] attribute on <a> elements inside a <daff-nav-list>.

Features

Navigation lists

Use <daff-nav-list> with anchor elements to create a list of links. This is useful for menus, sidebars, and footers.

<daff-nav-list aria-label="Shop by category">
  <a href="#" daff-list-item>
    Women
  </a>
  <a href="#" daff-list-item>
    Men
  </a>
  <a href="#" daff-list-item>
    Kids
  </a>
  <a href="#" daff-list-item>
    Sale
  </a>
</daff-nav-list>

Multi-line lists

For list items that contain multiple lines of text, use the [daffListItemTitle] element to identify the primary title. Additional supporting content can be added using <div> or <p> elements.

<daff-list>
  <daff-list-item>
    <div daffListItemTitle>Standard Shipping</div>
    <p>Arrives in 5-7 business days</p>
    <p></p>
    <p>Free on orders over $50</p>
  </daff-list-item>
  <daff-list-item>
    <div daffListItemTitle>Express Shipping</div>
    <p>Arrives in 2-3 business days for $9.99</p>
  </daff-list-item>
</daff-list>

Icon support

Use the [daffPrefix] element to display a leading visual icon for a list item.

<daff-list>
  <daff-list-item>
    <div daffPrefix>
      <fa-icon [icon]="faTruck"></fa-icon>
    </div>
    <div daffListItemTitle>Free shipping</div>
    <p>On all orders over $50</p>
  </daff-list-item>
  <daff-list-item>
    <div daffPrefix>
      <fa-icon [icon]="faRotateLeft"></fa-icon>
    </div>
    <div daffListItemTitle>Easy returns</div>
    <p>30-day free return policy</p>
  </daff-list-item>
  <daff-list-item>
    <div daffPrefix>
      <fa-icon [icon]="faLock"></fa-icon>
    </div>
    <div daffListItemTitle>Secure checkout</div>
    <p>Your payment is encrypted and protected</p>
  </daff-list-item>
</daff-list>

Accessibility

By default, list includes appropriate ARIA roles to support screen readers and provide an accessible experience.

• <daff-list> is assigned role="list" to identify a list of items.
• <daff-nav-list> is assigned role="navigation" to indicate that the list is used for navigation.
• <daff-list-item> within a <daff-list> is assigned role="listitem" to identify a list item contained inside the list.

Always provide an accessible label for <daff-nav-list> via aria-label or aria-labelledby to describe its purpose (e.g. "Footer links" or "Sidebar links").