Deprecated - Content List

About

The content-list component has been deprecated because it is a complex component that is almost never used except in a template where it needed a lot of customization.

If you need to do a complex list, you should implement it within a theme template.

Old information

A content-list is a list component:

• where the children may show rich content (multiple line, image, …)
• that has two styles:
  • card like style (default)
  • or minimal style with the flush theme.

Example

Numbered

Example of a multiple line content with boxes as list items.

<content-list numbered width="300px">
    <box>
         <heading h5>Lorem Ipsum</heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
    </box>
    <box>
         <heading h5>Lorem Ipsum</heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
   </box>
    <box>
         <heading h5>Lorem Ipsum</heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
    </box>
</content-list>

List items with Icon and badge

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">
    <box align="x-between-children">
        <itext><icon name="folder"/> [[docs:content:icon|Icon]]</itext>
        <badge>info</badge>
    </box>
    <box align="x-between-children">
        <itext><icon name="folder"/> [[docs:content:badge|Badge]]</itext>
        <badge>info</badge>
    </box>
    <box align="x-between-children">
        <itext><icon name="folder"/> [[docs:content:badge|Badge]]</itext>
        <badge>info</badge>
    </box>
</content-list>

Complex List

If you want to create more complex list of content, you can a combination of row and boxes

<content-list width="500px">
    <row>
        <box>{{:placeholder-rect-img.svg?100|}}</box>
        <box>
                <text align="between-children"><itext><icon name="folder" color="info"/> [[docs:content:icon|Icon]]</itext> <badge>info</badge></text>

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

                This is some content from a media component. You can replace this with any content and adjust it as needed.
        </box>
    </row>
</content-list>

• Output:

Syntax

<content-list type numbered>
    <component>
        ...
    </component>
</list>

where:

• the type may be:
  • empty (Default)
  • flush - to get a cleaner separation by removing borders and rounded corners
• numbered will add number to the children elements