## List

A concise list component for organizing and displaying information in a clear and structured manner.
Demo
Required Imports
import { ListModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | Default | Required
--- | --- | --- | --- | ---
Input | listItems | An array of `ListItemModel` objects representing the items to display in the list. | n/a | true
Input | hideMenuIcon | If true, the menu icon for each list item will be hidden. | false | false
Input | listTitle | The title of the list displayed at the top. | n/a | true
Input | disableTranslation | If true, disables translation for the list items. | false | false

Component | Css Variables | Demo
--- | --- | ---
`{{ listItemsCode }}` |  |
`{{ listItems2Code }}` |
`--lib-list-title-color` | #A8A8A8 | 'My Lifestyle' color
`--lib-list-item-action-color` | #666 | 'Add' color
`{{ listItems2Code }}` |  |

CSS Properties

Name | Default Value
--- | ---
`--lib-list-title-font-family` | 'Gilroy-Regular', serif
`--lib-list-title-font-size` | 14px
`--lib-list-item-label-color` | #A8A8A8
`--lib-list-item-label-font-family` | 'Gilroy-Regular', serif
`--lib-list-item-label-font-size` | 14px
`--lib-list-item-value-font-size` | 12px
`--lib-list-item-value-font-family` | 'Gilroy-Regular', serif
`--lib-list-item-arrow-icon-color` | #F7416E
`--lib-list-item-value-icon-colorr` | #F7416E