Rivet Stickers

Stickers for Indiana University's Rivet Design System.

Contents

1. Usage
1. HTML API
1. Request a new sticker

Usage

$3

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.

``html










`

$3

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).

`js
// ./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)

`html











`

$3

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:

`html

T-shirt printed with Indiana University logo
`

$3

Download or clone this repo, then install dependencies.

`
npm install
`

Start the server to launch the local test environment.

`
npm run start
`

HTML API

$3

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).

`html


`

$3

Use the size attribute to select the size of the sticker.

`html

`

Size options:

- xs (48px square)
- sm (64px square)
- md (80px square, default)
- lg (96px square)
- xl (128px square)

$3

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.

`html

`

Theme options:

- black (default)
- blue
- crimson
- gold
- green
- orange
- purple`

Request a new sticker

Submit a Rivet support request to request a new sticker.