Classic html list <li> and <dl> types: order, unordered, bulleted, inline and definition.
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
Sort list items in a logical order that makes information easily scannable by the users such as: alphabetical, numerical, chronological, or by user preference.
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
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