List component

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, 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(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