Welcome to Fabric, FINN’s Design System

Fabric provides components and tools to our product teams, to help them work more efficiently in creating simple, intuitive, and beautiful experiences for FINN users.

Lists

Lists display a set of related text-only content, grouped together and organised vertically. A list can be ordered (numbered) or unordered (bulleted). Use lists to break down complex ideas and make them more readable and scannable, or to make parallel choices easy to compare.

  • Use bulleted (unordered) lists to present two or more concepts of equal weight
  • Use numbered (ordered) lists to present a series of sequential steps
List example

Anatomy

List anatomy example

Options

Unordered list

Presents content of equal status or value.
Example:

Types of pets:

  • Cat
  • Dog
  • Parrot
  • Hamster
  • Goldfish

We have two unordered list styles:

  • Bulleted - a standard bullet style list
  • Checked - A visual check mark showing, for example, what features are included in a product.

Ordered list

Implies sequence and order, and is commonly used when giving a set of instructions.
Example:

My top five favourite cats

  1. PuseFINN
  2. Garfield
  3. Catwoman
  4. Top Cat
  5. Sylvester

Usage guidelines

Length

Lists should be used to present simple pieces of information. For more complex sets of data, consider using a “data table”.

Order

Arrange lists in a logical way. For example, if the list is about different types of cats, the default order might be the most popular to the least popular. Grouping items in categories into smaller, more specific lists might be more meaningful in some contexts. Alternatively, organise in alphabetical or numerical order.

Consistent text

Phrase your list items to be consistent with each other as much as possible. This helps with comprehension and readability. Some things to keep in mind when writing lists:

  • Capitalize the first letter of each list item.
  • Generally, don’t use terminal punctuation in list items, unless it’s a complete sentence or sentences.
  • If the list includes action items (as in a series of instructions), the entire list should follow the same format, with the verb first. If it’s a list of nouns, all items on the list should include nouns.
  • Use list items that are grammatically parallel (similar). For example, “He likes cooking, jogging and reading”, not “He likes cooking, jogging, and to read”.

Introductory phrases

Use an introductory phrase with a colon to lead into the list, and write each list item so it works with that phrase.

Capitalize each list item

Capitalize the first letter of each list item and use sentence case.