<paper-stamp>

Features Permalink ¶

<paper-stamp> is a native Web Component that displays an <img> as a paper stamp.

Check out the demo page.

Usage Permalink ¶

General usage example

You can begin using the <paper-stamp> Web Component by including a <script> tag in your HTML, with the component itself wrapping a <img>:

<script type="module" src="paper-stamp.js"></script>

<paper-stamp>
	<img src="/image.png" alt="...">
</paper-stamp>

There are also a handful of attributes you can set which will override the appearance of the stamps.

Custom stamp color

<paper-stamp color="cyan">
	<img src="/image.png" alt="...">
</paper-stamp>

Custom stamp padding

<paper-stamp padding="50px">
	<img src="/image.png" alt="...">
</paper-stamp>

Custom stamp perforation size

<paper-stamp perforation="15px">
	<img src="/image.png" alt="...">
</paper-stamp>

Custom stamp perforation spacing

<paper-stamp spacing="6">
	<img src="/image.png" alt="...">
</paper-stamp>