Inline Lists

You can use this simple construct when you just need a horizontal list of links, like in a footer, and want more control than just spaces between them.

Build With Predefined HTML Classes

There are two ways to build inline lists in Foundation 4: with our predefined HTML or with our mixins. Building inline lists using our predefined classes is easy. You'll start with an unordered list and add a class of .inline-list to it. From there, you just need to add list items with links in them.

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

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected inline-lists from a custom package. These should be linked up following our default HTML page structure.

Build with a Mixin

We've included SCSS mixins used to style inline lists. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _inline-lists.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/inline-lists";
Quick Mixin

You can build your inline lists using our global mixin by including it on your own custom class. The mixin contains all the necessary styles for positioning and styling the unordered list full of list items, the code looks like this:

.your-class-name { @include inline-list; }
Default SCSS Variables
$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: em-calc(17);
$inline-list-default-float-margin: em-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;

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...


This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video