Stickers for Indiana University's Rivet Design System
npm install rivet-stickersStickers for Indiana University's Rivet Design System.
1. Usage
1. HTML API
1. Request a new sticker
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`
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)./src/stickers.js
- The custom module (for example, )
`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:
`html`
T-shirt printed with Indiana University logo
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).
`html`
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)
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`
-
Submit a Rivet support request to request a new sticker.