Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/ on line 24
Cloud Web Component example: Sticky Note

Web Component Stycky Note

Sticky notes are a useful component to present notices to the user always visible and prominent. Its format is easily recognizable by the user as a typical sticky note.

A title, a small message and a link is all the information that this web component needs to be configured. You can also customize it to decide which position to include it in, the background color, the text color, and the rotation of the note.

The url of this cloud web component is

Do not forget to include before the component's import the polyfill for web components.

To use it with its basic configuration indicate its title, description and url of the link to which the user must go to expand information.

<!DOCTYPE html>
<html lang="en">
	<script src=""></script>
	<link  rel="import" href="" />

	<sticky-note data-title="title #1" data-text="Description #1" data-link=""></sticky-note>

Use examples

	data-title="title #1" data-text="Description #1" data-link="" data-where="bottom right">

Where to include it

Attribute data-where allows you to indicate the horizontal (left or right) and/or the vertical (top/bottom) position. By default it will appear in the "top left".

	data-title="title #1" data-text="Description #1" data-link="" data-background="#373">

Background color

To change the background color use the attribute data-background.

	data-title="title #1" data-text="Description #1" data-link="" data-color="#eea">

Text color

And if you want to change the color of the text use the attribute data-color.

	data-title="title #1" data-text="Description #1" data-link="" data-rotate="12">

Rotation of the Note

If you use the attribute data-rotate you can indicate the inclination with which you want to present the note.

	data-title="title #1" data-text="Description #1" data-link="" data-hidde-after-="5">

Hide your Note

Finally, you can hide the note after a number of seconds. The time can be indicated with the attribute data-hide-after.