---json
{
    "page_id": "8zwf12iajo22wwwyxzi41"
}
---

====== 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 [[docs:lists:lists|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 [[docs:layout:component:box|boxes]] as list items.

<webcode name="List" >
<code dw>
<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>
</code>
</webcode>


==== List items with Icon and badge ====
This example shows a ''content-list'' component with an:
  * [[docs:content:icon|icon]] as visual and a [[docs:content:link|link]] in a [[docs:content:itext|itext]]
  * [[docs:content:badge|badge]] as meta

<webcode name="List" >
<code dw>
<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>
</code>
</webcode>


==== Complex List  ====

If you want to create more complex list of content, you can a combination of [[:docs:layout:component:grid|row]] and [[docs:layout:component:box|boxes]]
<webcode name="media-list" >
<code dw>
<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>
</code>
  * Output:
</webcode>

===== Syntax =====


<code dw>
<content-list type numbered>
    <component>
        ...
    </component>
</list>
</code>
where:
  * the [[docs:styling:type|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