siimple 3.2.0 siimple.xyz
Components
Reusable advanced elements, including alerts, lists and more!
List
Simple component for displaying series of items
Added in v3.1.0
A list is an extensible component for displaying a series of items. Just create a new div element and add the siimple-list class. Then, add a div element inside it for each item you want with the class siimple-list-item.
Item 1
Item 2
Item 3
<div class="siimple-list" style="max-width:300px;">
    <div class="siimple-list-item">Item 1</div>
    <div class="siimple-list-item">Item 2</div>
    <div class="siimple-list-item">Item 3</div>
</div>
List title
Add siimple-list-title to any list item to style your text as a title for the list item.
Item title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="siimple-list" style="max-width:300px;">
    <div class="siimple-list-item">
        <div class="siimple-list-title">Item title</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
</div>
Hovered items
Just add siimple-list--hover to the list container to change the background-color property of a item of the list when the user moves the cursor over it.
Item 1
Item 2
Item 3
<div class="siimple-list siimple-list--hover" style="max-width:300px;">
    <div class="siimple-list-item">Item 1</div>
    <div class="siimple-list-item">Item 2</div>
    <div class="siimple-list-item">Item 3</div>
</div>
Combine with other elements
You can add a tag element inside a list item. It will be aligned to the right automatically:
0 Item 1
10 Item 2
<div class="siimple-list siimple-list--hover" style="max-width:300px;">
    <div class="siimple-list-item">
        <span class="siimple-tag siimple-tag--primary siimple-tag--rounded">0</span>
        Item 1
    </div>
    <div class="siimple-list-item">
        <span class="siimple-tag siimple-tag--error siimple-tag--rounded">10</span>
        Item 2
    </div>
</div>
Found a mistake or want to help improve this documentation? Suggest changes.