ComboStrap UI - List

1 - About

A List is a component that lay out continuous, vertical lines where each line is composed of:

  1. [Optional] a visual (icon or image)
  2. a text
  3. [Optional] and a meta information.

Since version 1.6

3 - Syntax

list is a HTML superset component and follows the following syntax



  • list defines a list
  • li defines a list item.

For the Geek

  • list translated to an ul html tag
  • li is translated to a flex li html tag.

The list implementations follows the Material design list with one-item type and not the Bootstrap list-group because they don't offer any visual supports.

4 - Example

4.1 - Icon and badge

The List component is aware of:

and applied style accordingly:

  • an icon gets by default a margin of two with the text.
  • the badge is pushed to the right side.
  • a link get the style attribute of its parent

<list width="300px" color="info">
        <icon name="folder"/>
        <icon name="folder"/>

5 - Documentation / Reference

Further reading and or related documentation

Powered by ComboStrap