Stickers for Indiana University's Rivet Design System.
This approach is recommended for development, prototyping, or restrictive production environments.
Link to:
- The Rivet Sticker Element styles (
./dist/rivet-sticker-element.css) - The bundle containing all the stickers (
./dist/rivet-stickers.js)
These files can be linked from a service like UNPKG.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/rivet-stickers/dist/rivet-sticker-element.css">
<script type="module" src="https://unpkg.com/rivet-stickers/dist/rivet-stickers.js"></script>
</head>
<body>
<rvt-sticker name="tulip"></rvt-sticker>
</body>
</html>For production, install the npm package.
npm install --save rivet-stickers
Create a custom module which imports only the stickers needed. The sticker module name (such as ./dist/tulip.js) matches its corresponding SVG file name (such as ./src/stickers/tulip.svg).
// ./src/stickers.js
import 'rivet-stickers/dist/tulip.js';
import 'rivet-stickers/dist/t-shirt-iu.js';Link to:
- The Rivet Sticker Element styles (
./dist/rivet-sticker-element.css) - The custom module (for example,
./src/stickers.js)
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="./node_modules/rivet-stickers/dist/rivet-sticker-element.css">
<script type="module" src="./src/stickers.js"></script>
</head>
<body>
<rvt-sticker name="tulip"></rvt-sticker>
<rvt-sticker name="t-shirt-iu"></rvt-sticker>
</body>
</html>By default, stickers are considered decorative images and hidden from screen reader users.
Ask this question to test if alternative text is needed: "Would this content still make sense to sighted users if the sticker was removed?" If no, then add alternative text using the Rivet class rvt-sr-only. For example:
<rvt-sticker name="t-shirt-iu"></rvt-sticker>
<span class="rvt-sr-only">T-shirt printed with Indiana University logo</span>Download or clone this repo, then install dependencies.
npm install
Start the server to launch the local test environment.
npm run start
Use the name attribute to declare the sticker to be rendered. The name of a sticker matches its corresponding SVG file name (./src/stickers/*.svg).
<rvt-sticker name="tulip"></rvt-sticker>
<rvt-sticker name="t-shirt-iu"></rvt-sticker>Use the size attribute to select the size of the sticker.
<rvt-sticker name="tulip" size="lg"></rvt-sticker>Size options:
xs(48pxsquare)sm(64pxsquare)md(80pxsquare, default)lg(96pxsquare)xl(128pxsquare)
Use the theme attribute to select a color theme. Sticker shapes are filled with white, outlined in a dark color, and centered on a circular background with a complementary light color.
<rvt-sticker name="tulip" theme="crimson"></rvt-sticker>Theme options:
black(default)bluecrimsongoldgreenorangepurple
Submit a Rivet support request to request a new sticker.