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

$3

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, you can install the vf-list with this command.

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

$3

The source files included are written in Sass(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 or the vf-sass-starter`

Help

- Read the Visual Framework troubleshooting
- Open a ticket
- Chat on Slack