Inline Lists

This simple construct creates a horizontal list of links, like in a footer. Use it when you want more control than spaces between links.

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

Basic

You can create an inline list using minimal markup.

<ul class="inline-list">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ul>

Customize with Sass

Lists can be easily customized using our Sass variables.

SCSS

$include-html-inline-list-classes: $include-html-classes;

// We use this to control the margins and padding of the inline list.
$inline-list-top-margin: 0;
$inline-list-opposite-margin: 0;
$inline-list-bottom-margin: rem-calc(17);
$inline-list-default-float-margin: rem-calc(-22);
$inline-list-default-float-list-margin: rem-calc(22);

$inline-list-padding: 0;

// We use this to control the overflow of the inline list.
$inline-list-overflow: hidden;

// We use this to control the list items
$inline-list-display: block;

// We use this to control any elments within list items
$inline-list-children-display: block;

Semantic Markup With Sass

You can create your own list using our Sass mixins.

Basic

You can use the inline-list() mixin like so:

SCSS

.custom-list-class {
  @include inline-list;
}

HTML

<ul class="custom-list-class">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/inline-lists";