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

    Rivet 1.8.0 release

    Rivet 1.8.0 is now available. This release adds border removal utility classes and fixes bugs related to the button, dropdown, and collapsible components.

  2. February 15, 2021

    Rivet announcements: Beta timeline, GitHub Discussions, and 1.8.0 release

    Updates about Rivet's development in the spring and beyond.

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

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.8.0
  • 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
Deprecated Added in 1.0.0

Panels

Use panels to help group content visually or call attention to parts of your application.

The Panel component is deprecated

The panel component will be removed in the next major version of Rivet in favor of the new box component. See the box component documentation for more information.

Default panel

The default panel in Rivet has light gray background that can be used to help call out content against the default white stage area.

Voluptates quas voluptas a est est ut nisi. Laborum debitis perferendis voluptatem. Ut nemo sint itaque qui harum. Id unde qui architecto praesentium quo adipisci vero. Eaque deserunt voluptatum delectus eveniet quas aut modi quo. Exercitationem non voluptatem temporibus.

<div class="rvt-panel">
    <p class="rvt-m-all-remove">Voluptates quas voluptas a est est ut nisi. Laborum debitis perferendis voluptatem. Ut nemo sint itaque qui harum. Id unde qui architecto praesentium quo adipisci vero. Eaque deserunt voluptatum delectus eveniet quas aut modi quo. Exercitationem non voluptatem temporibus.</p>
</div>

Light modifier

You can also create a panel with a white background by adding the rvt-panel--light modifier. The light panel can be used when your application has a light gray background.

Voluptates quas voluptas a est est ut nisi. Laborum debitis perferendis voluptatem. Ut nemo sint itaque qui harum. Id unde qui architecto praesentium quo adipisci vero. Eaque deserunt voluptatum delectus eveniet quas aut modi quo. Exercitationem non voluptatem temporibus.


<div class="rvt-panel rvt-panel--light">
    <p class="rvt-m-all-remove">Voluptates quas voluptas a est est ut nisi. Laborum debitis perferendis voluptatem. Ut nemo sint itaque qui harum. Id unde qui architecto praesentium quo adipisci vero. Eaque deserunt voluptatum delectus eveniet quas aut modi quo. Exercitationem non voluptatem temporibus.</p>
</div>

On this page

    • Default panel
    • Light modifier
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 © The Trustees of Indiana University