List componentAvailable since EcoComposer 1.0

List examples
Default SCSS values
SCSS implementation
HTML implementation

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>