List without interaction


Keywords
css, vcl, component, list
License
MIT
Install
npm install @vcl/list@0.6.1

Documentation

VCL list

Lists without interaction.

Features

  • Layout of nested lists.
  • Group header.
  • Separator.
  • Custom bullet icon for items.
  • Vertical and horizontal alignment.

Usage

Unordered.

unordered example

Ordered list.

ordered example

A list of definitions such as for terms in a glossary.

definition-list example

A list made with custom icons instead of standard bullets. The icogram component is used to create the icon/ label pairs.

icons example

The vclListHorizontal modifier makes the list items align horizontally.

horizontal example

Generally, list items can also be anchor tags to form a list of links.

Classes

  • vclList
  • vclListItem
  • vclSeparator
  • vclListGroupHeader

Modifiers

  • vclListHorizontal: to align the list items horizontally.
  • vclListCustomBullets: if custom icons for bullets shall be used.

Variables

  • --list-separator-border-color

Demo

example.html on GH-pages.