Skip to content
Indiana University Logo
Rivet Design System
  • Components Add-ons Content guide
  • What is Rivet? Blog Roadmap Changelog
  1. January 20, 2021

    Rivet featured on Accessible Code Libraries and Design Patterns list

    Rivet was highlighted alongside the U.S. government, GOV.UK, and Salesforce design systems.

  2. July 31, 2020

    Returning to development

    An update on plans for creating and releasing Rivet 2

  3. January 17, 2020

    Rivet 1.x.x End of Life Plan

    An overview of how we plan to retire Rivet 1

More posts Get updates in your inbox
Install via NPM Download CSS & JS Hosted assets
Navigation
    • Components
    • Add-ons
    • Content guide
    • What is Rivet?
    • Blog
    • Roadmap
    • Changelog
  • Use Rivet
Resources
  • User Experience Office
  • Accessibility Evaluations
  • Rivet Software Design System
  • IU Framework for WCMS
Version 1.7.2
  • Information
    • Roadmap
    • Changelog
    • Component status
    • Contributing
  • Getting started
    • Install with NPM
    • Rivet Sass
  • Layout
    • Box
    • Grid
    • Panels
    • Spacing
    • Typography
  • Page content
    • Badges
    • Links
    • Lists
    • Media Object
    • Step Indicator
    • Tables
    • Tabs This component requires JS
    • Timeline
  • Forms
    • Buttons
    • Segmented Buttons
    • Checkboxes
    • File input This component requires JS
    • Input group
    • Radio buttons
    • Select element
    • Text inputs
  • Navigation
    • Breadcrumb
    • Dropdown This component requires JS
    • Footer
    • Header This component requires JS
    • Menu
    • Pagination
  • Overlays & Feedback
    • Alerts This component requires JS
    • Loading indicator
    • Modals This component requires JS
  • Utilities
    • Border
    • Display
    • Flex
    • Text
    • Visibility
    • Width
    • z-index

Components

The Rivet components are a well-documented set of HTML, CSS, and JavaScript assets.

Stay up to date

Join the email list to get updates on releases, new features, examples, and how-to guides.

Subscribe Manage your settings

Get started

The Rivet components documentation contains examples, code snippets, and guidance on UX best-practices. There are several ways you can use Rivet in your project. The following instructions will help you get started.

Download Rivet

You can download a ZIP file that contains the compiled and minified CSS and JavaScript, images, and a starter HTML file.

Download Rivet

Download contents

The download contains the following files:

  • Compiled CSS (expanded and minified versions)
  • Compiled JavaScript (expanded and minified versions)
  • Sass source files
  • Starter index.html file
css/
  |—— rivet.css
  |—— rivet.min.css
js/
  |—— rivet.js
  |—— rivet.min.js
sass/
  |—— components/
  |—— core/
  |—— libs/
  |—— utilities/
  |—— rivet.scss
index.html

Axure UI and Wireframe kit

Rivet components on a screen

We've created an Axure wireframe kit with accurate representations of all the Rivet components. Download the Axure kit to help you create prototypes that will translate to Rivet components.

Download Axure kit

Install via NPM

Rivet is available as an NPM package. See the documentation on getting started with Rivet to learn more about installing Rivet using NPM.

Hosted CSS and JavaScript

Production applications

The hosted CSS and JavaScript assets are a good solution for prototyping ideas, early stages of development, and small apps that don’t get heavy traffic. We recommend managing Rivet as a dependency with NPM as a long-term solution for production apps with a large number of regular users.

The quickest way to get started with Rivet is using the centrally-hosted CSS and JavaScript files. Copy and paste this <link> element to <head> of your document. Make sure it is placed before any other stylesheets.

<link rel="stylesheet" href="https://assets.uits.iu.edu/css/rivet/1.7.2/rivet.min.css">

Rivet has a minimal amount of JavaScript that is required for some components, like the header. Copy and paste this link and add to the end of your document, just before the closing </body> tag.

<script src="https://assets.uits.iu.edu/javascript/rivet/1.7.2/rivet.min.js"></script>

Starter template

Here’s a basic starter template with the hosted CSS and JavaScript hooked up. Copy and paste into your favorite editor to start using Rivet.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://assets.uits.iu.edu/css/rivet/1.7.2/rivet.min.css">
    <title>Rivet starter file</title>
</head>
<body>
    <header class="rvt-header" role="banner">
        <a class="rvt-skip-link" href="#main-content">Skip to content</a>
        <div class="rvt-header__trident">
            <svg class="rvt-header__trident-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 48" aria-hidden="true">
                <title id="iu-logo">Indiana University Logo</title>
                <rect width="41" height="48" fill="#900"/>
                <polygon points="24.59 12.64 24.59 14.98 26.34 14.98 26.34 27.78 22.84 27.78 22.84 10.9 24.59 10.9 24.59 8.57 16.41 8.57 16.41 10.9 18.16 10.9 18.16 27.78 14.66 27.78 14.66 14.98 16.41 14.98 16.41 12.64 8.22 12.64 8.22 14.98 9.97 14.98 9.97 30.03 12.77 33.02 18.16 33.02 18.16 36.52 16.41 36.52 16.41 39.43 24.59 39.43 24.59 36.52 22.84 36.52 22.84 33.02 28 33.02 31.01 30.03 31.01 14.98 32.78 14.98 32.78 12.64 24.59 12.64" fill="#fff"/>
            </svg>
        </div>
        <span class="rvt-header__title">
            <a href="#0">Application Title</a>
        </span>
    </header>
    <main role="main" id="main-content">

        <!-- **************************************************************
            Start building here!
        *************************************************************** -->

    </main>
    <footer class="rvt-footer m-top-xxl" role="contentinfo">
        <div class="rvt-footer__trident">
            <svg role="img" alt="" xmlns="http://www.w3.org/2000/svg" width="20" height="25" viewBox="0 0 20 25">
                <polygon points="13.33 3.32 13.33 5.21 14.76 5.21 14.76 15.64 11.9 15.64 11.9 1.9 13.33 1.9 13.33 0 6.67 0 6.67 1.9 8.09 1.9 8.09 15.64 5.24 15.64 5.24 5.21 6.67 5.21 6.67 3.32 0 3.32 0 5.21 1.43 5.21 1.43 17.47 3.7 19.91 8.09 19.91 8.09 22.76 6.67 22.76 6.67 25.13 13.33 25.13 13.33 22.76 11.9 22.76 11.9 19.91 16.1 19.91 18.56 17.47 18.56 5.21 20 5.21 20 3.32 13.33 3.32" fill="#900"/>
            </svg>
        </div>
        <ul class="rvt-footer__aux-links">
            <li class="rvt-footer__aux-item">
                <a href="https://accessibility.iu.edu/assistance/">Accessibility</a>
            </li>
            <li class="rvt-footer__aux-item">
                <!-- You can learn more about privacy policies and generate one
                    for your site here:
                    https://protect.iu.edu/online-safety/tools/privacy-notice/index.html -->
                <a href="#0">Privacy Notice</a>
            </li>
            <li class="rvt-footer__aux-item">
                <a href="https://www.iu.edu/copyright/index.html">Copyright</a> &copy; 2019 The Trustees of <a href="https://www.iu.edu/">Indiana University</a>
            </li>
        </ul>
    </footer>
    <script src="https://assets.uits.iu.edu/javascript/rivet/1.7.2/rivet.min.js"></script>
</body>
</html>

Using Rivet with other frameworks

Currently Rivet does not support the use of additional CSS frameworks like Bootstrap, Foundation, etc. If you choose to use one of these frameworks alongside Rivet it is up to you to resolve any conflicts that arise.

On this page

    • Stay up to date
    • Get started
    • Download Rivet
      • Download contents
    • Axure UI and Wireframe kit
    • Install via NPM
    • Hosted CSS and JavaScript
    • Starter template
    • Using Rivet with other frameworks
Have a question about Rivet?

We're happy to help! If you've found a bug, typo, or have a request, the best way to get in touch is to create an issue on Github.

For all other questions please feel free to email us at rivet@iu.edu

  • Accessibility
  • Privacy Notice
  • Copyright © 2019 The Trustees of Indiana University