# List component

[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-list.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-list)

## About

Classic html list `<li>` and `<dl>` types: order, unordered, bulleted, inline and definition.

## Usage

When presenting a series of text-only content such as words or names, consider using a list. The best list type to use will depend on the relationships between the terms.

Default variant:
   - Use to present items without a specific order, like navigation menus or lists of features.

Tight variant:
   - The same as the default variant, but with less space between items. Use when it would be preferable to show more items of the same list together.

Large variant:
   - Larger items for when the list should be more prominent

Inline variant:
   - Use to display a list horizontally within a sentence or paragraph, such as a series of authors

Ordered variant:
   - Use for content with a specific sequence or order, such as steps in a process or ranked items.

Unordered variant:
   - Use to present items without a specific order, like navigation menus or lists of features.

Definition List
   - Use to show terms with definitions or descriptions

### Recommendations

Sort list items in a logical order that makes information easily scannable by the users such as: alphabetical, numerical, chronological, or by user preference.

## Install

This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-list` with this command.

```
$ yarn add --dev @visual-framework/vf-list
```

### Sass/CSS

The source files included are written in [Sass](http://sass-lang.com)(`scss`). You can point your Sass `include-path` at your `node_modules` directory and import it like this.

```
@import "@visual-framework/vf-list/index.scss";
```

Make sure you import Sass requirements along with the modules. You can use a [project boilerplate](https://stable.visual-framework.dev/building/) or the [`vf-sass-starter`](https://stable.visual-framework.dev/components/vf-sass-starter/)

## Help

- [Read the Visual Framework troubleshooting](https://stable.visual-framework.dev/troubleshooting/)
- [Open a ticket](https://github.com/visual-framework/vf-core/issues)
- [Chat on Slack](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ)