Stickers

Decorative graphics to visually enhance a message or idea

Overview #

Stickers are decorative graphics used to visually enhance a message or idea. Stickers are commonly used within hero or card list components to add visual interest and help the user more quickly comprehend a page’s content.

Developers can copy or download all available stickers through the Rivet sticker library. Stickers are also included in the Rivet UI kit (Figma design library).

Explore the Rivet sticker library

Request Rivet UI kit access

Rivet sticker element #

You can add stickers to a page layout using the rvt-sticker custom element.

To use this custom element, you’ll need to import the Rivet sticker CSS and JavaScript via CDN or install the rivet-stickers package using npm.

Hosted assets #

The quickest way to get started with the rvt-sticker element is to use the CDN-hosted versions of the CSS and JavaScript files. Copy and paste the markup below into the head of your document, after the main Rivet stylesheet.

<link rel="stylesheet" href="https://unpkg.com/rivet-stickers@0.3.0/dist/rivet-sticker-element.css">
<script type="module" src="https://unpkg.com/rivet-stickers@0.3.0/dist/rivet-stickers.js"></script>

Install using npm #

If you are using npm to manage your project’s dependencies, you can install the rivet-stickers package:

npm i --save rivet-stickers@0.3.0

Using the custom element #

Use the rvt-sticker custom element to render a sticker. The custom element supports three attributes: name, theme, and size.

Attribute	Description	Default
`name`	Required. Name of the sticker to render. A complete list of stickers and their names can be found on the sticker library page.	—
`theme`	Optional. Sticker color. Supported attribute values are `black`, `blue`, `crimson`, `gold`, `green`, `orange`, or `purple`.	`black`
`size`	Optional. Sticker size. Supported attribute values are `xs`, `sm`, `md`, `lg`, or `xl`.	`md`

Example use #

<!-- Default IU banner sticker -->
<rvt-sticker name="banner-iu"></rvt-sticker>

<!-- Crimson IU banner sticker -->
<rvt-sticker name="banner-iu" theme="crimson"></rvt-sticker>

<!-- Crimson IU banner sticker, size large -->
<rvt-sticker name="banner-iu" theme="crimson" size="lg"></rvt-sticker>

Complete documentation #

The Rivet stickers repo on GitHub features complete documentation for advanced users on how to use, adjust, and extend stickers.