List componentAvailable since EcoComposer 1.0

Simple elements list

  • Overview
  • Key Features
    • User Authentication
    • Role Management

      Description: Enables administrators to assign roles and permissions to users.

    • Data Export
  • Additional Information
  • Contact & Support

Clickable elements list

The default 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>
^