ComboStrap UI - Content List
Table of Contents
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:
- 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>
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:
