# List-inline

The List-inline object simply displays a list as one horizontal row.

Install using npm:

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


Basic usage of the List-inline object uses the required classes:

    <ul class="o-list-inline">

Example of o-list-inline

The only valid children of the .o-list-inline node are lis.


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">

Example of o-list-inline options

If you wish to completely remove the whitespace between items, omit the closing </li> tag:

    <ul class="o-list-inline">

Enable options

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;

Modify options

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;