The list-block object

The list-block object simply creates blocky lists from uls or ols.

Install using npm:

    $ npm install --save-dev aleut.objects.list-block
 

Usage

Basic usage of the list-block object uses the required classes:

<ul class="o-list-block">
    <li class="o-list-block__item">List-item</li>
    <li class="o-list-block__item">List-item</li>
</ul>

The only valid children of the .o-list-block node are .o-list-block__item.

Options

Other, optional classes can supplement the required base classes:

• .o-list-block--[tiny|small|large|huge]: alter the spacing between the list-elements

For example:

<ul class="o-list-block o-list-block--small">
    <li class="o-list-block__item">List-item</li>
    <li class="o-list-block__item">List-item</li>
</ul>

Enable options

To enable the optional classes set the variables to true before you import the _objects.list-block.scss-file.

$o-list-block--tiny:     false !default;
$o-list-block--small:    false !default;
$o-list-block--large:    false !default;
$o-list-block--huge:     false !default;