The List-inline object simply displays a list as one horizontal row.
$ npm install --save-dev aleut.objects.list-inline
Basic usage of the List-inline object uses the required classes:
<ul class="o-list-inline">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
The only valid children of the .o-list-inline
node are li
s.
Other, optional classes can supplement the required base classes:
.o-list-inline--delimited
: add a character to delimit list items.
For example:
<ul class="o-list-inline o-list-inline--delimited">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
If you wish to completely remove the whitespace between items, omit the closing
</li>
tag:
<ul class="o-list-inline">
<li>Foo
<li>Bar
<li>Baz
</ul>
To enable the optional class set the variable to true
before you import
the _objects.list-inline.scss
-file.
$o-list-inline--delimited: false !default;
To modify the character between items when you are using .o-list-inline--delimited
you specify that before you import the _objects.list-inline.scss
-file.
$o-list-inline-delimit-character: ",\00A0" !default;