Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/ on line 24
WPIECE. Cloud maintenance.

Cloud Web Components

Here are some examples of how to streamline your developments thanks to wpiece. Using web components you can modularize the frontend of your projects. And with wpiece store them in the cloud so you do not have to deploy your main application every time you have to change them.

Thanks to this you can also reuse those same components in other projects. Let's call them Cloud Web Components.

See the complete list


Ascii Image

We bring you some art (Ascii Art) with this web component that will transform any image into characters. Set the size, color and background color to make beautiful creations.

See Ascii Image in action and how to use it

Contact Card

An example of how to encapsulate in a custom element complex html structures to make our html code more readable, maintainable and reusable. Especially when these structures are used repetitively.

	name="Contact name"
	position="Contact position"

See Contact Card in action and how to use it

Circle Loader

With this Cloud Web Component you no longer need to create load icons for each website. Set the size, color and effect of the icon for any website where you need it.


See Circle Loader in action and how to use it

Site Notifier

Add a lightweight notification system to your website. With it you can present messages and warnings to your users when you need.


See Site Notifier in action and how to use it

Background Video

Include a video with autoplay as your website background to have impactful landing pages.

	<source src="video.mp4" type="mp4">

See Background Video in action and how to use it

Device View

Control the elements of your web to decide which to present to the user based on the device and the width of the screen from which it accesses.

<device-view type="phone" min-width="300" max-width="900">
	Content that will be displayed if the device is a mobile
	with screen width between 300 and 900 pixels.

See Device View in action and how to use it

Sticky Note

Present messages to your users with the appearance of sticky notes. You can configure their position, their color or how much time should be visible before hiding it.

	data-title="title #1"
	data-text="Description #1"

See Sticky Note in action and how to use it

Shadow Wrapper

Allows any element to be inserted as Shadow DOM on your page. In this way it remains encapsulated. Use it and adapt it to different websites by modifying their appearance (css) and actions (javascript).


See Shadow Wrapper in action and how to use it

Floating Banner

A simple way to make any web element always visible to the user. We can indicate where we want it (top/bottom and left/right).

	banner content (html, text,...)

See Floating Banner in action and how to use it