NordSecurity.Design

List

Overview

The List component displays a set of related text-only content in a structured manner. It breaks up chunks of related information, making it easier for users to scan and understand the content.

When to use

  • When you need to display a group of related items, such as features, options, or steps.

When not to use:

  • When you want to present a single option with an icon, such as “30-day warranty,” use the IconLabel component instead.

Anatomy

  1. List
  2. ListItem
  3. Indicator (ListType)
  4. Text

Variants & States

Gap

The gap property controls the spacing between ListItems, enhancing readability and visual appeal. We provide four gap settings to cater to various design needs: gap-0, gap-2, gap-3, and gap-4.

DarkMode

To ensure optimal readability on different backgrounds, we offer a darkMode property.

Size

The size of List used depends on its context. In most cases, the List should use the same size as the text surrounding it. In a default paragraph, for standalone Lists md size is usually a safe choice.

Style-type

There are four different indicator options for the List component:

  • disc The default type is a disc.
  • check Provides a checkmark.
  • custom Allows for any other icon, which should be related to the content.
  • none Removes the graphical element in front of the ListItem.

Internationalization

For RTL (right-to-left) languages, no custom adjustments have been made.

Properties

Name Type Values Description
styleType String disc
check
numbered
custom
none		 Defines the style of the list indicator
customStyleTypeIcon String Custom style icon to be used when styleType is set to custom
size String sm
md
lg		 Specifies the size of the List items
gap String gap-0
gap-2
gap-3
gap-4		 Determines the spacing between List items
darkMode Boolean true
false

Usage Guidelines

DoThe indicator should be aligned to the top left of the text for a consistent and clean look.
Don’tDon't change the alignement of the indicator.
DoThe indicator and the text should use colors from the text semantic palette to ensure visual consistency and accessibility.
Don’tThe indicator and the text shouldn't use colors outside the text semantic palette.
DoAvoid using commas and semicolons at the end of the text.
Don’tEnsure that there are no commas or semicolons at the end of the text for a clean presentation.

Content Guidelines

We use lists for various purposes, like showing benefits, breaking down the actionable steps or marking app changes.

Voice and tone

Different types of lists can have completely different tones. It all depends on the purpose of the list.

Copy

  • For tutorial-type lists, language is short, and numbering is preferable.
  • For marketing purposes and other contexts (for example, release notes), the language should be friendly and helpful.

Accessibility

  • If the list has bullets or checkmarks, the narrator should omit the signs and read the list as a single item.
  • Numbered lists should be narrated with numbers included.
Do[Narrator] How it works: Invite a friend. Wait for the purchase. Get instant rewards.
Don’t[Narrator] How it works: Bullet. Invite a friend. Bullet. Wait for the purchase. Bullet. Get instant rewards.