--- title: Inline Lists layout: component.html ---

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

*** {{> examples_inline_lists_basic}} ***

Basic

You can create an inline list using minimal markup.

HTML

{{#markdown}} ```html {{> examples_inline_lists_basic}} ``` {{/markdown}}

Rendered HTML

{{> examples_inline_lists_basic}}
*** ## Customize with Sass Lists can be easily customized using our Sass variables.

SCSS

{{> examples_inline_lists_variables}} *** ## 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

{{#markdown}} ```scss .custom-list-class { @include inline-list; } ```

HTML

```html ``` {{/markdown}} *** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

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