VCL list

List 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
• vclListSeparator
• 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.