Table of Contents

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>
  1. Lorem Ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

  2. Lorem Ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

  3. Lorem Ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

List items with Icon and badge

This example shows a content-list component with an: 

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

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