List componentAvailable since EcoComposer 1.0

Simple elements list

• First element
• List with a sub list
  • Sub element
  • Sub element - Part that is not in a paragraph

    Sub element - Part that is in a paragraph

  • Sub element
• Second element
• Third element

Clickable elements list

• First element
• List with a sub list
  • Sub element
  • Sub element
  • Sub element
• Second element
• Third element

The defaults values are :

'list--color' : 'list--color',
'list--foldable' : false,
'list--font-size' : 2.4rem * theming.$font-size,
'list--icon' : '⎔',
'list--foldable-icon' : '▶', // ⊞
'list--unfolded-icon' : null, // ⊟
'list--indent' : 2rem * theming.$font-size,
'list--indent--mobile' : 2rem * theming.$font-size,
'list--inner-icon' : '⏣',
'list--line-height' : 3.2rem * theming.$font-size,
'list--bullet--color' : 'list--bullet--color',
'list--bullet-hover--color' : 'list--bullet-hover--color',
'list--link--background-image' : null, // 'list--link--background-image'
'list--link--gradient-primary-color' : 'list--link--gradient-primary-color',
'list--link-hover--text-shadow' : 'list--link-hover--text-shadow',
'list--shift' : 1rem * theming.$font-size,
'list--shift--mobile' : 2rem * theming.$font-size,
'list--link--text-shadow' : 'list--link--text-shadow',
'print' : false,
'suffix' :  '',
'themes' : (
  'light' : (
    'default--list--bullet--color' : #000,
    'default--list--bullet-hover--color' : #444,
    'default--list--color' : #333,
    'default--list--link--gradient-primary-color' : #000,
    'default--list--link--text-shadow' : 0 0 3px #000,
    'default--list--link-hover--text-shadow' : 0 0 3px #444
  ),
  'dark' : (
    'default--list--bullet--color' : #fff,
    'default--list--bullet-hover--color' : #444,
    'default--list--color' : #ccc,
    'default--list--link--gradient-primary-color' : #fff,
    'default--list--link--text-shadow' : 0 0 3px #000,
    'default--list--link-hover--text-shadow' : 0 0 3px #444
  )
)

We can implement it that way :

@include list.init();
@include list.create(
  (
    'font-size': 2.4rem,
    'line-height': 3.2rem,
    'themes': $themes,
  )
);

We can implement it that way :

<ul class="list suffix"> <li class="list-item suffix has-link"> <a href=#>First element</a> </li> <li class="list-item suffix foldable">List with a sub list <ul class="list suffix"> <li class="list-item suffix has-link"> <a href=#>Sub element</a> </li> <li class="list-item suffix has-link"> <a href=#>Sub element</a> </li> <li class="list-item suffix has-link"> <a href=#>Sub element</a> </li> </ul> </li> <li class="list-item suffix has-link"> <a href=#>Second element</a> </li> <li class="list-item suffix has-link"> <a href=#>Third element</a> </li> </ul>