This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

List

List is component that helps with vertical indexing of content. Every list item begins with a bullet or a number.

Table of contents

How to use List

  • when displaying vertical data (text and images)
  • when displaying hierarchically indexed content

Component variations

The List component can be configured in two different ways: to display bulleted (unordered) list or numbered (ordered) list.

Code example

Props

List

NameRequiredDefaultTypeDescription
asHTML Tag or React Component, e.g. div, span, etc.
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes

List.Item

NameRequiredDefaultTypeDescription
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-list-itemstringA [data-test-id] attribute used for testing purposes