List

Regular list

Example:


<div class="list" style="flex: 1">
    <div class="list-element">
        <span class="text">Element 1</span>
    </div>
    <div class="list-element">
        <span class="text">Element 2</span>
    </div>
    <div class="list-element">
        <span class="text">Element 3</span>
    </div>
    <div class="list-element">
        <span class="text">Element 4</span>
    </div>
</div>

Result:

Element 1
Element 2
Element 3
Element 4
List of activable elements

Hover the mouse over the elements to see it change color.

Example:


<div class="list" style="flex: 1">
    <div class="list-element activable">
        <span class="text">Element 1</span>
    </div>
    <div class="list-element activable">
        <span class="text">Element 2</span>
    </div>
    <div class="list-element activable">
        <span class="text">Element 3</span>
    </div>
    <div class="list-element activable">
        <span class="text">Element 4</span>
    </div>
</div>

Result:

Element 1
Element 2
Element 3
Element 4
List of activable elements - alternative background color

Hover the mouse over the elements to see it change color.

Example:


<div class="box bg-2" style="padding: 1em">
    <div class="list bg-2" style="flex: 1">
        <div class="list-element activable">
            <span class="text">Element 1</span>
        </div>
        <div class="list-element activable">
            <span class="text">Element 2</span>
        </div>
        <div class="list-element activable">
            <span class="text">Element 3</span>
        </div>
        <div class="list-element activable">
            <span class="text">Element 4</span>
        </div>
    </div>
</div>

Result:

Element 1
Element 2
Element 3
Element 4