ComboStrap UI - Content List

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

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

This example shows a content-list component with an:

• icon as visual and a link in a itext
• badge as meta

<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>

• Icon info

• Badge info

• Badge info

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:

• Icon info

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

• Icon info

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