List | siimple css

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.