Returnless UI

Description list ​

Description lists are a way to organize and explain related information. They're particularly useful when you need to list and define terms.

Props
align?:
"vertical" | "horizontal"
Defaults to "horizontal"
The alignment of the description list.

Usage ​

Logistics
The management of products or other resources as they travel between a point of origin and a destination.
Sole proprietorship
A business structure where a single individual both owns and runs the company.
Discount code
A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
js
<script lang="ts" setup>
import {
  DescriptionList,
  DescriptionListDescription,
  DescriptionListItem,
  DescriptionListTerm,
} from '@returnless/focus-ui';
</script>

<template>
  <DescriptionList>
    <DescriptionListItem>
      <DescriptionListTerm>Logistics</DescriptionListTerm>
      <DescriptionListDescription>
        The management of products or other resources as they travel between a point of origin and a destination.
      </DescriptionListDescription>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Sole proprietorship</DescriptionListTerm>
      <DescriptionListDescription>A business structure where a single individual both owns and runs the company.</DescriptionListDescription>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Discount code</DescriptionListTerm>
      <DescriptionListDescription>
        A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
      </DescriptionListDescription>
    </DescriptionListItem>
  </DescriptionList>
</template>

Description list with vertical alignment ​

Logistics
The management of products or other resources as they travel between a point of origin and a destination.
Sole proprietorship
A business structure where a single individual both owns and runs the company.
Discount code
A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
js
<script lang="ts" setup>
import {
  DescriptionList,
  DescriptionListDescription,
  DescriptionListItem,
  DescriptionListTerm,
} from '@returnless/focus-ui';
</script>

<template>
  <DescriptionList align="vertical">
    <DescriptionListItem>
      <DescriptionListTerm>Logistics</DescriptionListTerm>
      <DescriptionListDescription>
        The management of products or other resources as they travel between a point of origin and a destination.
      </DescriptionListDescription>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Sole proprietorship</DescriptionListTerm>
      <DescriptionListDescription>A business structure where a single individual both owns and runs the company.</DescriptionListDescription>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Discount code</DescriptionListTerm>
      <DescriptionListDescription>
        A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
      </DescriptionListDescription>
    </DescriptionListItem>
  </DescriptionList>
</template>

Best practices ​

Description lists should:

  • Contain terms and associated explanations, or descriptions for each term.
  • Provide information that isn't action-oriented.
  • Not be an excuse for using unnecessarily complicated or jargon-filled language. Generally, if users need a description list to understand the language in your application, you should look for opportunities to simplify the language.
  • Not be used to upsell users on a feature or service.

Content guidelines ​

Terms ​

Terms should be:

  • Written in sentence case (the first word capitalized, the rest lowercase).

Term description ​

Thems descriptions should be:

  • Directly related to the term they're describing.
  • Written to describe the users benefit or utility.
  • Written in sentence case with all appropriate punctuation, including ending each sentence with a period.
  • Conversational by using articles ("the", "a", "an").
  • Written in plain language.

Accessibility ​

The description list component produces a description list wrapper (<dl>), terms (<dt>), and definitions (<dd>) to convey the relationships between the list items to assistive technology users.