vui-image-action

This component contains SASS mixins and CSS that you can use to style image actions.

An Image Action is a link associated with an image that performs an action when clicked.

Installation

vui-image-action can be installed from Bower:

bower install vui-image-action

Or alternatively from NPM:

npm install vui-image-action

Depending on which installation method you choose, use that path when doing the SASS import:

@import 'bower_components/vui-image-action/image-action.scss';
// or...
@import "node_modules/vui-image-action/image-action.scss";

Usage

An Image Action must have a <img> element for the image, and a <span> element describing the action. These elements should be enclosed in a <a> that performs the action when clicked.

HTML:

<a href="#">
	<img src="img/help.svg" alt="">
	<span>Action</span>
</a>

SCSS:

a {
	@include vui-image-action;
}

Multiple Image Actions can be grouped in a list.

HTML:

<ul>
	<li>
		<a href="#">
			<img src="img/print.svg" alt="">
			<span>Print</span>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="img/settings.svg" alt="">
			<span>Settings</span>
		</a>
	</li>
</ul>

SCSS:

ul {
	@include vui-image-action-list;
}
a {
	@include vui-image-action;
}

For further information on this component and other VUI components, see the docs at ui.valence.d2l.com.

Coding styles

See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.