ComboStrap UI - Content List

About

A content-list is a component that lays out component as continuous, vertical lines.

Syntax

content-list is a HTML superset component that layouts a serie of row

<content-list type>
    <row>
        Text
    </row>
</list>

where the type may be:

  • box (Default)
  • flush - to get a cleaner separation by removing borders and rounded corners

Example

Basic - List of row with Icon and badge

This example shows a content-list component with an:

<content-list flush color="info" width="300px">
    <row>
        <itext><icon name="folder"/> [[docs:content:icon|Icon]]</itext>
        <badge align="right">info</badge>
    </row>
    <row>
        <itext><icon name="folder"/> [[docs:content:badge|Badge]]</itext>
        <badge align="right">info</badge>
    </row>
    <row>
        <itext><icon name="folder"/> [[docs:content:badge|Badge]]</itext>
        <badge align="right">info</badge>
    </row>
</content-list>

List of row

If you want to create more complex list of content, you can add the cells that will lay out the content automatically.

<content-list width="fit">
    <row>
        <cell>
        {{:placeholder-rect-img.svg?100|}}
        </cell>
        <cell>
            <text>
                <icon name="folder" color="info"/> [[docs:content:icon|Icon]] <badge align="right">info</badge>
                
                This is some content from a media component. You can replace this with any content and adjust it as needed.
            </text>
         </cell>
    </row>
    <row>
        <cell>
        {{:placeholder-rect-img.svg?100|}}
        </cell>
        <cell>
            <text>
                <icon name="folder" color="info"/> [[docs:content:icon|Icon]] <badge align="right">info</badge>
                
                This is some content from a media component. You can replace this with any content and adjust it as needed.
            </text>
         </cell>
    </row>
</content-list>
  • Output:
  • Image

    Icon info

    This is some content from a media component. You can replace this with any content and adjust it as needed.

  • Image

    Icon info

    This is some content from a media component. You can replace this with any content and adjust it as needed.

Powered by ComboStrap