vcl-list

Lists without interaction.

Usage no npm install needed!

<script type="module">
  import vclList from 'https://cdn.skypack.dev/vcl-list';
</script>

README

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.

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.