Thumbnav

Create a flexible thumbnail navigation that can be aligned with the Flex component.

Usage

To apply this component, add the .f-thumbnav class to an <ul> element and nest your thumbnail images inside <a> elements within the list items. The thumbnav will wrap into several rows, if it is wider than its container and automatically applies a gutter. Add the .f-active class to create an active state.

To align a subnav, for example to horizontally center it, you can use the Flex component.

Example

Markup

<ul class="f-thumbnav">
	<li class="f-active"><a href=""><img src="" alt=""></a></li>
	<li><a href=""><img src="" alt=""></a></li>
</ul>

Thumbnav and grid

You can use one of the .f-grid-width-* classes from the Grid component to evenly accomodate all thumbnav items within one row.

Example

Markup

<ul class="f-thumbnav f-grid-width-1-5">
	<li>...</li>
</ul>