Required plugin

This feature requires the plugin file css/styles/files.css

The template provides 2 differents files lists styles, both with 2 different sizes. It also includes a complete file types icon set.

Icon lists

This style has the following options:

No link, full-block link or link only on file name
Custom controls showing on hover
Use image thumbnails, with or without transparency
Optional image frame

Default style

Add the class on-dark to the list when used against a dark background.

Mini style

Add the class mini to the list to use this style.

Quick tip

If you omit the images size attributes, they will automatically be resized to fit, and the aspect ratio is preserved.

<ul class="files-icons">

	<!-- default style, with no link -->
	<li>
		<span class="icon file-gif"></span>
		Static
	</li>

	<!-- Full block link -->
	<li><a href="#" class="file-link">
		<span class="icon file-image"></span>
		Clickable
	</a></li>

	<!-- Link only on file name -->
	<li>
		<span class="icon file-png"></span>
		<a href="#">Clickable name</a>
	</li>

	<!-- With controls on hover -->
	<li>
		<span class="icon file-png"></span>
		<div class="controls">
			<span class="button-group compact children-tooltip">
				<a href="#" class="button icon-gear" title="Edit properties"></a>
				<a href="#" class="button icon-trash" title="Move to trash"></a>
			</span>
		</div>
		<a href="#">Hover menu</a>
	</li>

	<!-- With an transparent icon -->
	<li><a href="#" class="file-link">
		<span class="icon"><img src="img/demo/picto.png"></span>
		Thumbnail
	</a></li>

	<!-- With a frame around thumbnail -->
	<li><a href="#" class="file-link">
		<span class="icon"><img src="img/demo/picture.png" class="framed"></span>
		Thumbnail with border
	</a></li>

</ul>

File lists